通过jQuery实现的百叶窗效果

页面布局

<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();

 					});
 				});
 			});
 		});
 		//动完结束后
 }

 

虽然滑动效果感觉并没有 自己想要的那种感觉....但起码也是实现了