文档介绍：代码如下:
#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
{
z-index: 2;
}
#frame a
{
display: block;
width: 50%;
height: 100%;
position: absolute;
top: 0;
z-index: 10;
color: transparent;
background-image: url();
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;
}
,该部分以讲解为主,插件的详细代码和如何使用,还是参照demo。
第一步是搭建插件的骨架:
复制代码代码如下:
(function ($) {
$.tranzify = {
defaults: { //默认配置
transitionWidth: 40, //遮罩层每一小片段的宽度
transitionHeight: '100%', //遮罩层每一小片段高度
containerID: 'overlay', //遮罩层id
transitionType: 'ian',//默认遮罩层动画效果
prevID: 'prev',//上一条导航ID
nextID: 'next',//下一条导航ID
visibleClass: 'visible' //可见性class
},
//插件初始化操作