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

  次阅读 作者:智能小宝 来源:互联网 2015-10-03 10:45 我要评论(0)

本文章给各位同学介绍一个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 )

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...