本文章给各位同学介绍一个DGallery插件模拟翻相 图片切换效果,例子是 mouseout 切换生效 不用点击的 如果要改的话 改下配置参数就好了
代码如下
复制代码
<script type=“text/javascript” src=“../jquery.js”></script>
<script type=“text/javascript” src=“../dgallery.js”></script>
<script>
function DPicc(){
DGallery.call( this ); //继承
var self = this;
var len = 0; //图片个数
this.createImage = function( src ){ //重写createImage 方法
len ++
var options = this.getOptions();
var bg = $(‘<div class=“dpicc-stage”></div>’).appendTo( this.getLink() );
if( options.tilt ){ //tilt 新增自定义配置属性 后面会添加的 先往下看
var deg = Math.random() * 30 – 15; //该属性是用来选择 是否倾斜相片 这里用CSS3 IE那个滤镜太复杂了 有兴趣自行研究
bg.css({
‘WebkitTransform’:'rotate(‘ + deg + ‘deg)’,
‘MozTransform’:'rotate(‘ + deg + ‘deg)’,
‘OTransform’:'rotate(‘ + deg + ‘deg)’,
‘transform’:'rotate(‘ + deg + ‘deg)’
})
}
var t = $(‘<img>’).attr( ‘src’, src ).css({‘width’:options.width – 20,’height’:options.height – 20}).appendTo( bg );
//这里之所以这么做 是因为 在本地测试的话
//IE7,8 的缓存 存在不会在读图片 会造成图片显示有问题 所以判断是否已经加载
//FF 免疫 不过不影响效果 在dgallery 自身也是这样写的;
if( t[0].complete ) load.push( t.attr( ‘src’ ) );
else t.load(function(){ load.push( $(this).attr( ‘src’ ) ); })
return bg;
}
//自定义扩展方法 overflow
//使图片的zIndex 重新排列;
this.overflow = function( num ){
var img = this.getImage();
var cur = num;
for( var i = len – 1; i >= 0; i — ){
cur = this.loop( cur );
img[cur++].css(‘zIndex’,i);
}
}
//自定义扩展方法 page 这里用于切换效果;
this.page = function(){
var cur =
>this.getImage( ‘current’ ); //当前图片
var next = this.getImage( ‘next’ ); //下一个图片
var options = this.getOptions(); //配置文件 必须得这样拿 因为 options 在原框架中是var 私有属性
var index = this.getNext(); //获取下一个图片的在所在列表中的位置
//queue 用于多个效果同时起作用;
cur.animate({‘left’:options.width,’top’:- options.height}, {‘queue’:false,’duration’:options.speed, ‘complete’:function(){
self.overflow( index )
cur.animate({‘left’:0,’top’:0}, {‘queue’:false,’duration’:options.speed, ‘complete’:function(){
self.unlock(); //这里也是必须的 因为图片切换过程中 进行了锁定 这里 切换完毕要进行 解锁操作;
}});
}})
}
this._init = this.init;
this.init = function( opt ){ //构造方法
this._init( opt );
this.overflow( 0 );
}
this.setDefault({ //设置默认配置参数
‘play’ : ‘mouseout’, //mouseout 与hover 效果一样
‘effect’ : ‘page’, //page 为上面用到的切换效果
‘overflow’ : ‘visible’, //因为前面的图片切换 多出来的都是不可见的 所以 这里把超出设置成可见;
’tilt’ : false //是否倾斜 默认还是否吧 毕竟 FF里面运行也有点儿卡 看来迟下要做 html5 canvas做更高层次开发了
})
//之前一样 必须的
return this.jready( arguments );
}
document.write( ‘<style>’ );
document.write( ‘.dpicc-stage{position:absolute;width:468px;height:356px;background:#fff;border:1px solid #ccc;-moz-box-shadow:0 2px 15px #333;-webkit-box-shadow:0 2px 15px #333;box-shadow:0 2px 15px #333;}’ );
document.write( ‘.dpicc-stage img{border:0;margin:10px;}’ );
document.write( ‘</style>’ );
//这里利用到一幅背景图 没的话 不太好看 有的话 好看点儿 不喜欢用图片的 可以 吧下面backgournd url 删除 不影响DPicc运作
//调用方式也是一样 与第一篇文章有详细说明
new DPicc( ‘#pic6′, ’1_1.jpg|1_2.jpg|1_3.jpg|7_1.png|7_3.jpg|7_4.jpg|7_6.jpg’, ‘../image/’ );
</script>
</head>
<body>
<div style=“width:1003px; margin:0 auto;”>
<div style=“width:614px;height:532px;float:left;margin:0 auto;background:url(../panel/bg.png) 0 0 no-repeat;”>
<div id=“pic6″ style=“width:470px;height:358px;margin:88px 0 0 74px;”></div>
</div>
</div>
</body>
