标签:
页面布局
<ul class="OutDiv"> <li> <img class="OutImg" src="images/0.jpg"/> </li> <li> <img class="OutImg" src="images/1.jpg"/> </li> <li> <img class="OutImg" src="images/2.jpg"/> </li> <li> <img class="OutImg" src="images/3.jpg"/> </li> </ul>
jQuery实现
通过创建 div格子 填充页面的img 然后定位div格子的背景位置 实现背景分离效果
function imgSet(setW,setH,index) { //设置OutDiv和OutImg的宽带高度 $(‘.OutImg‘).css({height:setH,width:setW}); $(‘.OutDiv‘).css({height:setH,width:setW}); //获取img的宽度 高度 var imgWidth=$(‘.OutImg‘).width(); var imgHeigh=$(‘.OutImg‘).height(); var ex=/^\d+$/; //计算需要的格子数目 //XCount记录一行多少个格子 YCount记录列 //X记得列格子宽度 Y记录列格子高度 for(var XCount=8;XCount>1;XCount--){ var X=imgWidth/XCount; if (ex.test(X) ) { break; } } for(var YCount=3;YCount>0;YCount--){ var Y=imgHeigh/YCount; if ((Y%10)==0 ) { break; } } //创建格子 for(var i=0;i<XCount*YCount;i++) { var xtemp=i%XCount*X; var ytemp=parseInt(i/XCount)*Y; var ok=parseInt(i/XCount)*Y; var bgposition="-"+xtemp+"px "+"-"+ytemp+"px"; var tempDiv=$("<div class=‘innerDiv‘></div>").css({ ‘position‘:‘absolute‘, ‘width‘:X, ‘height‘:Y, ‘left‘:xtemp, ‘top‘:ytemp, ‘background-position‘:bgposition, }); //添加到Div中 $(‘.OutDiv‘).append(tempDiv); var bgindex=‘./images/‘+index+‘.jpg‘; $(‘.innerDiv‘).css(‘background-image‘,‘url(‘+bgindex+‘)‘); } }
滑动效果
function sildeLR(speed){ //动画效果 var LDiv=$(‘.innerDiv:odd‘) var RDiv=$(‘.innerDiv:even‘) var InnerDiv=$(‘.innerDiv‘).width(); var OutWidth=$(‘.OutImg‘).width(); LDiv.each(function(){ //获取div的left var scrLeft=$(this).position().left+InnerDiv; $(this).animate({ left:scrLeft, opacity:0.2},(speed/2), //接着上一个动画 function(){ $(this).fadeOut(200).remove(); RDiv.each(function(){ var scrLeft=$(this).position().left-OutWidth; $(this).animate({ left:scrLeft, opacity:0.2},speed, function(){ $(this).remove(); }); }); }); }); //动完结束后 }
虽然滑动效果感觉并没有 自己想要的那种感觉....但起码也是实现了
标签:
原文地址:http://www.cnblogs.com/xshaobaozi/p/4991359.html