开发手册HTMLCSSJavaScript
HTML手册CSS手册JavaScript手册JavaScriptHTML DOMjQueryJSONDHTMLJavaScript相关jQuery 属性操作 - addClass() 方法jQuery 属性操作 - attr() 方法jQuery 属性操作 - hasClass() 方法jQuery 属性操作 - removeAttr() 方法jQuery 属性操作 - removeClass() 方法jQuery 属性操作 - toggleClass() 方法jQuery 属性操作 - val() 方法jQuery CSS 操作 - css() 方法jQuery CSS 操作 - height() 方法jQuery CSS 操作 - offset() 方法jQuery CSS 操作 - offsetParent() 方法jQuery CSS 操作 - position() 方法jQuery CSS 操作 - scrollLeft() 方法jQuery CSS 操作 - scrollTop() 方法jQuery CSS 操作 - width() 方法jQuery 遍历 - clearQueue() 方法jQuery 数据 - data() 方法jQuery 遍历 - dequeue() 方法jQuery 遍历 - hasData() 方法jQuery 数据 - jQuery.data() 方法jQuery 遍历 - jQuery.dequeue() 方法jQuery 遍历 - jQuery.queue() 方法jQuery 数据 - jQuery.removeData() 方法jQuery 遍历 - queue() 方法jQuery 数据 - removeData() 方法jQuery DOM 元素方法 - get() 方法jQuery DOM 元素方法 - index() 方法jQuery DOM 元素方法 - size() 方法jQuery DOM 元素方法 - toArray() 方法jQuery 效果 - animate() 方法jQuery 效果 - clearQueue() 方法jQuery 效果 - fadeIn() 方法jQuery 效果 - fadeOut() 方法jQuery 效果 - fadeTo() 方法jQuery 效果 - hide() 方法jQuery 效果 - show() 方法jQuery 效果 - slideDown() 方法jQuery 效果 - slideToggle() 方法jQuery 效果 - slideUp() 方法jQuery 效果 - stop() 方法jQuery 效果 - toggle() 方法jQuery 事件 - bind() 方法jQuery 事件 - blur() 方法jQuery 事件 - change() 方法jQuery 事件 - click() 方法jQuery 事件 - dblclick() 方法jQuery 事件 - delegate() 方法jQuery 事件 - die() 方法jQuery 事件 - error() 方法jQuery 事件 - focus() 方法jQuery 事件 - isDefaultPrevented() 方法jQuery 事件 - keydown() 方法jQuery 事件 - keypress() 方法jQuery 事件 - keyup() 方法jQuery 事件 - live() 方法jQuery 事件 - load() 方法jQuery 事件 - mousedown() 方法jQuery 事件 - mouseenter() 方法jQuery 事件 - mouseleave() 方法jQuery 事件 - mousemove() 方法jQuery 事件 - mouseout() 方法jQuery 事件 - mouseover() 方法jQuery 事件 - mouseup() 方法jQuery 事件 - one() 方法jQuery 事件 - pageX 属性jQuery 事件 - pageY 属性jQuery 事件 - preventDefault() 方法jQuery 事件 - ready() 方法jQuery 事件 - resize() 方法jQuery 事件 - result 属性jQuery 事件 - scroll() 方法jQuery 事件 - select() 方法jQuery 事件 - submit() 方法jQuery 事件 - target 属性jQuery 事件 - timeStamp 属性jQuery 事件 - toggle() 方法jQuery 事件 - trigger() 方法jQuery 事件 - triggerHandler() 方法jQuery 事件 - type 属性jQuery 事件 - unbind() 方法jQuery 事件 - undelegate() 方法jQuery 事件 - unload 属性jQuery 事件 - which 属性jQuery 效果jQuery HTML 操作jQuery 参考手册 - 队列控制jQuery 文档操作 - after() 方法jQuery 文档操作 - append() 方法jQuery 文档操作 - appendTo() 方法jQuery 文档操作 - before() 方法jQuery 文档操作 - clone() 方法jQuery 文档操作 - detach() 方法jQuery 文档操作 - empty() 方法jQuery 文档操作 - html() 方法jQuery 文档操作 - insertAfter() 方法jQuery 文档操作 - insertBefore() 方法jQuery 文档操作 - prependTo() 方法jQuery 文档操作 - prepend() 方法jQuery 文档操作 - remove() 方法jQuery 文档操作 - replaceAll() 方法jQuery 文档操作 - replaceWith() 方法jQuery 文档操作 - text() 方法jQuery 文档操作 - unwrap() 方法jQuery 文档操作 - wrap() 方法jQuery 文档操作 - wrapAll() 方法jQuery 文档操作 - wrapInner() 方法jQuery context 属性jQuery jquery 属性jQuery jQuery.fx.interval 属性jQuery jQuery.fx.off 属性jQuery jQuery.support 属性jQuery length 属性jQuery * 选择器jQuery :animated 选择器jQuery [attribute] 选择器jQuery [attribute$=value] 选择器jQuery [attribute=value] 选择器jQuery [attribute!=value] 选择器jQuery . 选择器jQuery :contains 选择器jQuery element 选择器jQuery :empty 选择器jQuery :eq() 选择器jQuery :even 选择器jQuery :first 选择器jQuery :gt 选择器jQuery :header 选择器jQuery # 选择器jQuery :input 选择器jQuery :button 选择器jQuery :checkbox 选择器jQuery :checked 选择器jQuery :disabled 选择器jQuery :enabled 选择器jQuery :file 选择器jQuery :image 选择器jQuery :password 选择器jQuery :radio 选择器jQuery :reset 选择器jQuery :selected 选择器jQuery :submit 选择器jQuery :text 选择器jQuery :last 选择器jQuery :lt 选择器jQuery :odd 选择器jQuery :visible 选择器jQuery 遍历 - add() 方法jQuery 遍历 - andSelf() 方法jQuery 遍历 - children() 方法jQuery 遍历 - closest() 方法jQuery 遍历 - contents() 方法jQuery 遍历 - each() 方法jQuery 遍历 - end() 方法jQuery 遍历 - eq() 方法jQuery 遍历 - filter() 方法jQuery 遍历 - find() 方法jQuery 遍历 - first() 方法jQuery 遍历 - has() 方法jQuery 遍历 - is() 方法jQuery 遍历 - last() 方法jQuery 遍历 - map() 方法jQuery 遍历 - next() 方法jQuery 遍历 - nextAll() 方法jQuery 遍历 - nextUntil() 方法jQuery 遍历 - not() 方法jQuery 遍历 - offsetParent() 方法jQuery 遍历 - parent() 方法jQuery 遍历 - parents() 方法jQuery 遍历 - parentsUntil() 方法jQuery 遍历 - prev() 方法jQuery 遍历 - prevAll() 方法jQuery 遍历 - prevUntil() 方法jQuery 遍历 - siblings() 方法jQuery 遍历 - slice() 方法jQuery Mobile 教程ECMAScript 函数概述ECMAScript arguments 对象ECMAScript 闭包(closure)ECMAScript Function 对象(类)JavaScript 的历史JavaScript 实现ECMAScript 关键字ECMAScript 定义类或对象ECMAScript 修改对象ECMAScript 面向对象技术ECMAScript 对象作用域ECMAScript 对象类型ECMAScript 对象应用ECMAScript 加性运算符ECMAScript 赋值运算符ECMAScript 位运算符ECMAScript Boolean 运算符ECMAScript 逗号运算符ECMAScript 条件运算符ECMAScript 等性运算符ECMAScript 乘性运算符ECMAScript 关系运算符ECMAScript 一元运算符ECMAScript 原始类型ECMAScript 引用类型ECMAScript 保留字ECMAScript break 和 continue 语句ECMAScript if 语句ECMAScript 迭代语句ECMAScript 标签语句ECMAScript switch 语句ECMAScript with 语句ECMAScript 语法ECMAScript 类型转换ECMAScript 原始值和引用值ECMAScript 变量HTML DOM Anchor 对象HTML DOM Area 对象HTML DOM Audio 对象HTML DOM Base 对象HTML DOM Blockquote 对象HTML DOM Body 对象HTML DOM Button 对象HTML DOM Canvas 对象HTML DOM Checkbox 对象HTML DOM Column 对象HTML DOM Color 对象HTML DOM Datalist 对象HTML DOM Input Date 对象HTML DOM Datetime Local 对象HTML DOM Datetime 对象HTML DOM Del 对象HTML DOM Details 对象HTML DOM Dialog 对象HTML DOM Document 对象HTML DOM Email 对象HTML DOM Embed 对象HTML DOM Event 对象HTML DOM Fieldset 对象HTML DOM FileUpload 对象HTML DOM Form 对象HTML DOM Frame 对象HTML DOM Frameset 对象HTML DOM Hidden 对象History 对象HTML DOM IFrame 对象HTML DOM Image 对象HTML DOM Input Image 对象HTML DOM Input Time 对象HTML DOM Ins 对象HTML DOM Keygen 对象HTML DOM Legend 对象HTML DOM Li 对象HTML DOM Link 对象Location 对象HTML DOM Map 对象HTML DOM MenuItem 对象HTML DOM Meta 对象HTML DOM Meter 对象HTML DOM Month 对象Navigator 对象HTML DOM Number 对象HTML DOM Object 对象HTML DOM Ol 对象HTML DOM OptionGroup 对象HTML DOM Option 对象HTML DOM Parameter 对象HTML DOM Password 对象HTML DOM Progress 对象HTML DOM Button 对象HTML DOM Quote 对象HTML DOM Radio 对象HTML DOM Input Range 对象HTML DOM Reset 对象Screen 对象HTML DOM Script 对象HTML DOM Input Search 对象HTML DOM Select 对象HTML DOM Source 对象HTML DOM Style 对象HTML DOM Submit 对象HTML DOM Table 对象HTML DOM TableCell 对象HTML DOM TableHeader 对象HTML DOM TableRow 对象HTML DOM Text 对象HTML DOM Textarea 对象HTML DOM Time 对象HTML DOM Title 对象HTML DOM Track 对象HTML DOM Input URL 对象HTML DOM Video 对象HTML DOM Input Week 对象Window 对象JavaScript eval() 函数JavaScript Array 对象JavaScript Boolean 对象JavaScript Date 对象JavaScript 全局对象JavaScript Math 对象JavaScript Number 对象JavaScript RegExp 对象JavaScript String 对象HTML DOM getContext() 方法多媒体教程 - 在 Web 上使用图像多媒体教程 - GIF 图像多媒体教程 - JPEG 图像PHP 教程SVG 教程HTTP 方法:GET 对比 POST什么是超文本?TCP/IP 教程VBScript 教程万维网联盟(W3C)教程XML 教程XML DOM 加载函数XML DOM 教程XML DOM 参考手册

多媒体教程 - GIF 图像

GIF 是在 Web 上使用的主要图像格式之一。

本文详细讲解了 GIF 图像的特性和使用技巧。

理解图像格式

无论是 HTML 还是 XHTML 都没有规定图像的官方格式。然而,流行的浏览器却专门规定了一定的图像格式:通常情况下是 GIF 和 JPEG。其他多媒体格式大多需要特殊的辅助应用程序,每个浏览器的使用者都要去获得、安装并正确地操作这些应用程序,这样才能看到或听到这些特殊的文件。所以,GIF 和 JPEG 成为在 Web 上的实际标准也就不令人觉得奇怪了。

在 Web 出现以前,这两种图像格式已经得到了广泛使用,所以有大量支持软件可以帮助我们以这两种格式创建图像。然而,这两种格式各自有其优缺点,有些浏览器会利用其特性来实现特殊的显示效果。

GIF

GIF 格式指的是图像交换格式(Graphics Interchange Format,GIF),该格式最初是 CompuServe 为其在线服务用户传输图像而开发的。

GIF 格式的特性

GIF 格式有很多特性,因此在 HTML/XHTML 中十分普及。

首先,它的编码技术在许多平台上都可以使用。所以,通过适当地 GIF 解码软件(大多数浏览器都含有这种软件),在 Macintosh 上创建并组成 GIF 文件的图像,在基于 Windows 的 PC 上也可以毫不费力地加载、解码并查看。

GIF 格式的第二个特性是,它采用了一种特殊的压缩技术,可以显著减小图像文件的大小,从而得以在网络上更快地进行传输。而 GIF 压缩是“无损”压缩,也就是说,图像中原来的数据都不会发生改变或丢失,所以解压缩并解码后的图像与原来的图像完全一样。

此外,GIF 图像还非常容易实现动画效果。

GIF 格式的版本和颜色

尽管 GIF 图像文件都用 .gif (或者 .GIF)作为文件名后缀,实际上却有两个 GIF 版本:原始的 GIF87 和 GIF89a,后者支持很多新特性,包括透明背景、交叉存储和动画等,这些特性在 Web 创作者中的使用十分普及。

现在流行的浏览器都支持这两种 GIF 格式,它们都是通过同一种方案来把 8 位的像素值映射到一个颜色表当中,这样每个图像最多可以有 256 种颜色。

大多数 GIF 图像实际颜色的数目更少,有些特殊工具(比如 Macromedia 的 Fireworks)可以在更为精细的图像中简化这些颜色。通过简化颜色,可以创建更小的颜色映像并且强化像素冗余,来使文件压缩得更多,从而使下载速度更快。

然而,由于颜色数目有限,用 GIF 编码的图像并不是任何时候都适用,尤其是对那些具有照片一样逼真效果的图片来说。GIF 可以用来创建非常好看的图标和颜色不多的图像及图画。

即使是非常挑剔的创作者也会选择 GIF

因为大多数图形浏览器都明确地支持 GIF 格式,因此它现在是 Web 上接受面最广泛的图像编码格式。内联图像和外部链接图像都可以使用这种格式。如果你在选择图像格式方面犹豫不决,使用 GIF 肯定没错。它几乎在所有情况下都可以正常使用。

GIF 图像的技巧

GIF 图像有三种特殊的技巧:隔行扫描(interlacing)、透明性(transparency)和动画(animation)。

隔行扫描

通过隔行扫描,GIF 图像可以在屏幕上一下子显现出来,而不是从上到下逐步地显示。一般情况下,用 GIF 编码的图像是像素数据从图像的顶部到底部顺次、逐行排列的一个序列。所以,普通的 GIF 图像在屏幕上显示时,就好像一下子拉开窗帘,而具有隔行扫描的 GIF 在显示时,则像卷起百叶窗一样。这是因为像素数据的序列是每隔 4 行就交错一次。用户只需要用下载并显示一整幅图像的四分之一时间,就可以看到一个从上到下非常完整的图像,虽然它很模糊。这个只完成了四分之一的图像通常已经足够清楚了,这样那些网络连接速度较慢的用户就能够判断出,是否有必要花时间下载图像其余的部分。

尽管所有的图形浏览器都能够显示隔行扫描 GIF,但并不是所有浏览器都可以显示出隔行扫描那种逐渐清晰的效果。即使是那些可以实现这种效果的浏览器,用户还可以通过选择在图像完全下载并解码后再显示,来抑制这种效果。老式浏览器总是当图像完全下载并解码后才会显示,所以根本不支持这种效果。

透明性

GIF 图像(实际上是 GIF89a 格式的图像)另外一种常见的效果,是它可以让图像的一部分变成透明效果,这样图像下面的内容(通常是浏览器的窗口背景)就可以透过透明部分显示出来。透明的 GIF 图像在它的颜色映射里专门用一种颜色作为背景颜色,从而让显示窗口的背景透过来。通过仔细地剪切图像的大小和选择一种接近纯色的背景颜色,透明图像可以制作成看上去好像完全镶嵌在网页中,或者是浮动在上面的效果。

透明 GIF 图像适合于任何希望融入文档当中但又不希望看上去是个方块的图形。透明的 GIF 徽标十分常见,如透明图标或者印刷符号等 - 任何具有任意的自然形状的图像都可以使用这种效果。还可以在传统文本中插入透明的内联图像,以便在其中显示特殊的字符符号。

GIF 图像的透明效果有一个不好的地方,就是如果把它包含在超链接锚(<a>)标签里面而没有去掉它的边框,或者用框架专门将它括起来时,它看上去会十分糟糕。而且其他内容会围绕图像的矩形边框显示,而不是靠近图像的不透明边框。这样的结果就是不必要地把图像隔离出来,或者使网页看上去非常古怪。

动画

GIF89a 格式图像的第三个独特之处是,它可以实现简单的逐帧动画。通过使用特殊的 GIF 动画工具软件,就可以把一系列 GIF 图像放在一个单独的 GIF89a 文件中。浏览器会相继显示文件中的每个图像,就像我们小时候曾经玩过的(甚至画过的)那种通过快速翻页产生动画效果的小册子。在 GIF 文件中,每个图像之间都具有特殊的控制部分,可以用来设置浏览器从头到尾显示整个序列(循环)的次数,每两个图像之间停顿的时间,以及在浏览器显示后面一个图像之前是否从背景中抹去图像空间,等等。通过把这些特性与那些 GIF 通常具有的特性(包括单独的颜色表、透明性、隔行扫描等)结合起来,就可以创造出非常有吸引力而且非常精致的图像。

简单的 GIF 动画之所以具有强大的效果,还有另外一个重要的原因:不需要特地为 HTML 文档编写程序就可以获得动画效果。但它也有一个非常大的毛病,那就是它局限在一些象图标大小般很小的图形中,或者是只占据浏览器窗口中很窄一条的图形当中:即使你非常谨慎地没有在连续的动画单元中重复静态部分,GIF 动画也是非常容易变得很大。这样,如果文档中包含了多个动画,那么下载这些图像的拖延时间可能会令用户非常反感。如果说有什么特性值得我们非常小心仔细地对待而不至于滥用的话,那就是 GIF 动画。

总结

GIF 的所有技巧 - 隔行扫描、透明性和动画 - 都不是随随便便就可以获得的,它们都需要特殊的软件来准备这些 GIF 文件。现在很多图像软件都可以把用户创建的或者从外部获得的图像保存为 GIF 格式,而且大多数都支持透明效果,还可以实现 GIF 文件的隔行扫描效果。还有非常多专门为这些需要而设计的大量共享软件或免费软件,包括实现 GIF 动画的软件程序等。

关于千图| 赞助千图 |千图首页   Copyright2014千图网   沪ICP备10011451号-6   用时:0.0228秒

千图网提示