开发工具:
文件大小: 96kb
下载次数: 0
上传时间: 2015-03-26
详细说明： 实现页面批量图片元素翻页效果,有问题联系我 var page1=["img/blue1.png","img/red1.png","img/white1.png"];//第1页 var page2=["img/blue2.png","img/red2.png","img/white2.png"];//第2页 var page3=["img/blue3.png","img/red3.png","img/white3.png"];//第3页 var dataList=new Array(); dataList.push(page1); dataList.push(page2); dataList.push(page3); $(document).ready(function(){ var f=0; $("#dbRoWrap img").each(function(){//初始化第一页数据 $(this).attr("src",pa ge1[f]); f=f+1; }); $("#btn1").click(function(){ turnPage(1); }); $("#btn2").click(function(){ turnPage(2); }); $("#btn3").click(function(){ turnPage(3); }); }); function turnPage(pageNo){ var i=0; $("#dbRoWrap div").each(function(){//遍历dbRoWrap下的所有图片容器 doTurnPage(i,pageNo,$(this)); i=i+1; }); } function doTurnPage(i,pageNo,obj){ var opt={rotateSpeed:100 }; $(obj).each(function(){//遍历图片容器中的图片 var $this=$(this); var $img=$this.find('img'); var imgWidth=$img.width(); var imgHeight=$img.height(); $this.css({'width':imgWidth,'height':imgHeight});//设置图片容器的宽高 $img.stop() .animate({'left':imgWidth/2,'width':0},opt.rotateSpeed,function(){ $(this).attr({'src':dataList[pageNo-1][i]});//设置图片路径 }).animate({'left':0,'width':imgWidth},opt.rotateSpeed); }); } ...展开收缩
(系统自动生成,下载前可以参看下载内容)
下载文件列表
相关说明
- 本站资源为会员上传分享交流与学习,如有侵犯您的权益,请联系我们删除.
- 本站是交换下载平台，提供交流渠道，下载内容来自于网络，除下载问题外，其它问题请自行百度。
- 本站已设置防盗链，请勿用迅雷、QQ旋风等多线程下载软件下载资源，下载后用WinRAR最新版进行解压.
- 如果您发现内容无法下载，请稍后再次尝试；或者到消费记录里找到下载记录反馈给我们.
- 下载后发现下载的内容跟说明不相乎，请到消费记录里找到下载记录反馈给我们，经确认后退回积分.
- 如下载前有疑问，可以通过点击"提供者"的名字，查看对方的联系方式，联系对方咨询.
