页面布局
<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