jquery动画3.创建一个带遮罩效果的图片走廊.doc

1、代码如下:#frame position: relative; width: 700px; height: 400px; overflow: hidden; z-index: 0; #frame img width: 700px; height: 400px; position: absolute; top: 0; left: 0; z-index: 1; #frame img.visible z-index: 2; #frame a display: block; width: 50%; height: 100%; position: absolute; top: 0; z-index: 1

2、0; color: transparent; background-image: url(transparent.gif); filter: alpha(opacity = 0); text-align: center; text-decoration: none; font: 90px “Palatino Linotype“ , “Book Antiqua“ , Palatino, serif; line-height: 400%; #frame a:hover color: #fff; text-shadow: 0 0 5px #000; filter: alpha(opacity = 1

3、00); filter: Shadow(Color=#000, Direction=0); #frame a:focus outline: none; #prev left: 0; #next right: 0; #overlay width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 3; #overlay div position: absolute; 接下来介绍 jquery.tranzify.js插件如何制作，该部分以讲解为主，插件的详细代码和如何使用，还是参照 demo。 第一步是搭建插件的骨架

4、： 复制代码 代码如下:(function ($) $.tranzify = defaults: /默认配置 transitionWidth: 40, /遮罩层每一小片段的宽度 transitionHeight: 100%, /遮罩层每一小片段高度 containerID: overlay, /遮罩层 id transitionType: venetian,/默认遮罩层动画效果 prevID: prev,/上一条导航 ID nextID: next,/下一条导航 ID visibleClass: visible /可见性 class , /插件初始化操作 createUI: function

5、(config) , /创建遮罩层 createOverlay: function (config) , /运行动画效果 runTransition: function (config) ; $.fn.extend( /创建插件函数 tranzify: function (options) return this; ); )(jQuery); 基本骨架有了，我们先来实现插件函数 tranzify的实现。代码还是很简单的，就是获取当前的 dom对象，对其创建相关 html元素和相应事件，最后把 this返回回去，实现链式模式，代码如下： 复制代码 代码如下:/创建插件函数 tranzify: f

6、unction (options) /扩展配置 var config = $.extend($.tranzify.defaults, options); /获取当前 dom对象，传给 config.selector config.selector = “#“ + this.attr(id); /计算出我们需要创建的遮罩层片段数 config.multi = parseInt(this.width() / config.transitionWidth; /创建插件 $.tranzify.createUI(config); /返回对象本身，实现链式效果 return this; 接下来我们介绍 c

7、reateUI函数。首先获取图片总数： 复制代码 代码如下:var imgLength = $(config.selector).find(img).length, 接下来定义上一条和下一条导航，并添加到 selector对象上。 复制代码 代码如下:prevA = $(, id: config.prevID, href: #, html: , click: function (e) e.preventDefault(); /隐藏导航 $(config.selector).find(a).css(display, none); /创建遮罩 $.tranzify.createOverlay(co

8、nfig); /获取当前显示状态的图片 var currImg = $(. + config.visibleClass, $(config.selector); /当前图片不是第一张图片 if (currImg.prev().filter(img).length 0) /将上一张图片设置为可显示状态 currImg.removeClass(config.visibleClass).prev().addClass(config.visibleClass); else /设置最后一张图片为可显示状态 currImg.removeClass(config.visibleClass); $(confi

9、g.selector).find(img).eq(imgLength - 1).addClass(config.visibleClass); /运行遮罩效果 $.tranzify.runTransition(config); ).appendTo(config.selector), nextA = $(, id: config.nextID, href: #, html: , click: function (e) e.preventDefault(); /隐藏导航 $(config.selector).find(a).css(display, none); /创建遮罩 $.tranzify.

10、createOverlay(config); /获取当前显示状态的图片 var currImg = $(. + config.visibleClass, $(config.selector); /当前图片不是最后一张图片 if (currImg.next().filter(img).length 0) /将下一张图片设置为可显示状态 currImg.removeClass(config.visibleClass).next().addClass(config.visibleClass); else /设置第一张图片为可显示状态 currImg.removeClass(config.visibl

11、eClass); $(config.selector).find(img).eq(0).addClass(config.visibleClass); /运行遮罩效果 $.tranzify.runTransition(config); ).appendTo(config.selector); 最后别忘记把第一张图片设置为显示状态。 复制代码 代码如下:$(config.selector).find(img).eq(0).addClass(config.visibleClass); 下面介绍创建遮罩层的代码。主要思路是：创建一组 div，div 的背景就是当前显示的图片，通过设置各个 div cs

12、s的 left值，背景的backgroundPosition值，使这组 div组成一个完整的图片效果。还是看代码吧，一看就一目了然了。 复制代码 代码如下:/div left的偏移量 var posLeftMarker = 0, /div 背景 position的偏移量 bgHorizMarker = 0, /遮罩层总的包装对象 overlay = $(, id: config.containerID ); /循环，确定需要创造的片段数 for (var i = 0; i , /设置宽度 width: config.transitionWidth, /设置高度 height: config.t

13、ransitionHeight, css: /设置背景图片，来源就是当前处于显示状态的图片 backgroundImage: url( + $(. + config.visibleClass, $(config.selector).attr(src) + ), /设置背景图片大小，让他们和外部容器高度、宽度一致。 /这样无论你图片的大小，都会和容易大小匹配 backgroundSize: $(config.selector).width() + px + $(config.selector).height() + px, /设置背景偏移量 backgroundPosition: bgHoriz

14、Marker + px 0, /设置 left值 left: posLeftMarker, top: 0 ).appendTo(overlay);/添加到遮罩层容器 /重新计算偏移量 bgHorizMarker -= config.transitionWidth; posLeftMarker += config.transitionWidth; /遮罩层容器添加到页面 overlay.insertBefore(# + config.prevID); ok， 只剩运行遮罩层的代码了。这段代码也很简单，就是获取遮罩层容易下面的各个 div，对他们添加动画效果，逐个让他们的高度或者宽度变为 0，等整

15、个动画结束后，移出遮罩层容器。 复制代码 代码如下:/获取遮罩层容器 var transOverlay = $(# + config.containerID), /获取遮罩层容器下各 div transEls = transOverlay.children(), len = transEls.length - 1; /根据配置运行不懂得动画效果 switch (config.transitionType) case venetian: transEls.each(function (i) transEls.eq(i).animate( width: 0 , slow, function ()

16、if (i = len) transOverlay.remove(); $(config.selector).find(a).css(display, block); ); ); break; case strip: var counter = 0; function strip() transEls.eq(counter).animate( height: 0 , 150, function () if (counter = len) transOverlay.remove(); $(config.selector).find(“a“).css(“display“, “block“); else counter+; strip(); ); strip(); break; 好了，内容讲完了，把代码拼接起来就可以运行最终效果了。希望这篇文章对你有帮助。