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

代码如下: #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: 10; 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 = 100); 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。 　　第一步是搭建插件的骨架： 复制代码 代码如下: (function ($) { $.tranzify = { defaults: { //默认配置 transitionWidth: 40, //遮罩层每一小片段的宽度 transitionHeight: 100%, //遮罩层每一小片段高度 containerID: overlay, //遮罩层id transitionType: venetian,//默认遮罩层动画效果 prevID: prev,//上一条导航ID nextID: next,//下一条导航ID visibleClass: visible //可见性class }, //插件初始化操作 createUI: function (config) { }, //创建遮罩层 createOverlay: function (config) { }, //运行动画效果 runTransition: function (config) { } }; $.fn.extend({ //创建插件函数 tranzify: function (options) {return this; } }); })(jQuery); 基本骨架有了，我们先来实现插件函数tranzify的实现。代码还是很简单的，就是获取当前的dom对象，对其创建相关html元素和相应事件，最后把this返回回去，实现链式模式，代码如下： 复制代码 代码如下: //创建插件函数 tranzify: function (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;