JQuery
jquery插件DGallery插件模拟翻相 图片切换效果
本文章给各位同学介绍一个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 = 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> | |
话题作者
头衔:无
活跃成员
