复制代码 代码如下:
#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.visibleclass);
} 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.visibleclass);
} else {
//设置第一张图片为可显示状态
currimg.removeclass(config.visibleclass);
$(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 css的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.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;
}
好了，内容讲完了，把代码拼接起来就可以运行最终效果了。希望这篇文章对你有帮助。
demo下载地址：jquery.animation.tranzify