码迷,mamicode.com
首页 > Web开发 > 详细

通过jQuery实现的百叶窗效果

时间:2015-11-24 14:37:04      阅读:307      评论:0      收藏:0      [点我收藏+]

标签:

页面布局

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

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

 

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

通过jQuery实现的百叶窗效果

标签:

原文地址:http://www.cnblogs.com/xshaobaozi/p/4991359.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!