jquery动画3.创立一个带遮罩后果的图片走廊[指南]

jquery动画3.创立一个带遮罩后果的图片走廊[指南] 代码如下: #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; } 接下来我们介绍createUI函数。首先获取图片总数: 复制代码 代码如下: 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(config); //获取当前显示状态的图片 var currImg = $('.' + config.visibleClass, $(config.selector)); //当前图片不是第一张图片 if (currImg.prev().filter('img').length > 0) { //将上一张图片设置为可显示状态 currImg.removeClass(config.visibleClass).prev().addClass(config.visib leClass); } else { //设置最后一张图片为可显示状态 currImg.removeClass(config.visibleClass); $(config.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.createOverlay(config); //获取当前显示状态的图片 var currImg = $('.' + config.visibleClass, $(config.selector)); //当前图片不是最后一张图片 if (currImg.next().filter('img').length > 0) { //将下一张图片设置为可显示状态 currImg.removeClass(config.visibleClass).next().addClass(config.visib leClass); } else { //设置第一张图片为可显示状态 currImg.removeClass(config.visibleClass); $(config.selector).find('img').eq(0).addClass(config.visibleClass); } //运行遮罩效果 $.tranzify.runTransition(config); } www.iniot.cn }).appendTo(config.selector); www.3jllc.com 最后别忘记把第一张图片设置为显示状态。 复制代码 代码如下: $(config.selector).find('img').eq(0).addClass(config.visibleClass); div的背景就是 下面介绍创建遮罩层的代码。主要思路是:创建一组div， 当前显示的图片，通过设置各个div css的left值，背景的backgroundPosition值，使这组div组成一个完整的图片效果。还是看代码吧，一看就一目了然了。 复制代码 代码如下: //div left的偏移量 var posLeftMarker = 0, //div 背景position的偏移量 bgHorizMarker = 0, //遮罩层总的包装对象 overlay = $('', { id: config.containerID }); //循环，确定需要创造的片段数 for (var i = 0; i < config.multi; i++) { //创造片段，每个片段只包含当前显示图片的一部分图片 $('', { //设置宽度 width: config.transitionWidth, //设置高度 height: config.transitionHeight, css: { //设置背景图片，来源就是当前处于显示状态的图片 backgroundImage: 'url(' + $('.' + config.visibleClass, $(config.selector)).attr('src') + ')', //设置背景图片大小，让他们和外部容器高度、宽度一致。 //这样无论你图片的大小，都会和容易大小匹配 backgroundSize: $(config.selector).width() + 'px ' + $(config.selector).height() + 'px', //设置背景偏移量 backgroundPosition: bgHorizMarker + 'px 0', //设置left值 left: posLeftMarker, top: 0 } }).appendTo(overlay);//添加到遮罩层容器 //重新计算偏移量 bgHorizMarker -= config.transitionWidth; posLeftMarker += config.transitionWidth; } //遮罩层容器添加到页面 overlay.insertBefore('#' + config.prevID); 只剩运行遮罩层的代码了。这段代码也很简单，就是获取遮罩层容易下面ok， 的各个div，对他们添加动画效果，逐个让他们的高度或者宽度变为0，等整个动画结束后，移出遮罩层容器。 复制代码 代码如下: //获取遮罩层容器 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 () { 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; }