当前位置:编程学习 > JS >>

jquery插件DGallery插件模拟翻相 图片切换效果

 代码如下 复制代码

 

<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> 

补充:网页制作,jquery 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,