下面介绍一下如何对一堆叠加的图片进行上下切换
工具/原料
jquery
方法/步骤
1、先在div容器中加入一堆图片本帖中的图片都用htt圬桦孰礅p://placehold.it/300x250来代替<divid=&q锇栀劐箨uot;gallery"> <divid="pictures"> <imgsrc="http://placehold.it/300x250&text=Item1"alt=""/> <imgsrc="http://placehold.it/300x250&text=Item2"alt=""/> <imgsrc="http://placehold.it/300x250&text=Item3"alt=""/> <imgsrc="http://placehold.it/300x250&text=Item4"alt=""/> <imgsrc="http://placehold.it/300x250&text=Item5"alt=""/> </div></div>
2、为了实现杂乱的效果，对img添加如下css。本例用的是chrome浏览器，其它浏览器请自行更改前缀divimg:nth-child(even){-webkit-transform:rotate(10deg);margin-left:5px;}divimg:nth-child(3n){-webkit-transform:rotate(-15deg);}其结果如下图
3、对所有的img添加z-indexvarz=0;$('#picturesimg').each(function(){z++;$(this).css('z-index',z);});
4、新增点击图片事件$('#pictures').click(function(){returnswapFirstLast();});
5、实现swapFirstLast首先，只让最上层的，也就是z-i艘绒庳焰ndex最大的那个上移->z-index制为最小->袖紫囫挡还原位置$(this).animate({'top':'-'+$(this).height()+'px'},'slow',function(){$(this).css('z-index',1).animate({'top':'0'},'slow',function(){});});其它图片则把各自的z-index加1$(this).css('z-index',parseInt($(this).css('z-index'))+1);//完整代码functionswapFirstLast(){$('#picturesimg').each(function(){if($(this).css('z-index')==z){$(this).animate({'top':'-'+$(this).height()+'px'},'slow',function(){$(this).css('z-index',1).animate({'top':'0'},'slow',function(){});});}else{$(this).css('z-index',parseInt($(this).css('z-index'))+1);}});returnfalse;}
6、所有代码如下
7、css代码如下@charset"utf-8";*{margin:0;padding:0;list-style-type:none;}body{font:12px/180%"微软雅黑";background:#22384d;color:#555555;}#gallery{position:relative;width:460px;margin:40pxauto0auto;}#pictures{position:relative;height:408px;}#picturesimg{position:absolute;top:0;left:0;}
