百叶窗照片(偏js版、jq精简版)

╰+哭是因爲堅強的太久メ 2021-07-25 02:53 335阅读 0赞

问题
    	如何计算每个图片分配的位置大小
    	当一个图片完全展开时，如何计算其他图片分配的位置大小
    	如何设置未点击时的黑幕效果和点击后的去除(即利用定位，使得黑幕div和img重叠，然后设置黑幕div的背景颜色和透明度)
    	压缩图片的效果是怎么实现的(利用overflow多余效果不显示);
    	如何清除动画累计	
    	jq是使用.eq()来进行类似数组下标操作的
    	
    添加方法
    	$('选择器').find('css选择器(类选择器要加.)');  获得选择对象的子元素
    要想添加回归延迟效果
    	使用mouseover事件

偏js思想版

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			*{ 
    				margin: 0px;
    				padding: 0px;
    			}
    			.box{ 
    				width:800px;
    				height: 300px;
    				border: solid 1px orange;
    				position: relative;
    				margin: 100px auto;
    				overflow: hidden;
    			}
    			ul{ 
    				list-style-type: none;
    			}
    			ul li{ 
    				position: absolute;
    			}
    			.cover{ 
    				width: 100%;
    				height: 300px;
    				background-color: rgba(0,0,0,0.5);
    				position: absolute;
    			}
    			
    			.li1{ 
    				left: 160px;
    			}
    			.li2{ 
    				left:320px;
    			}
    			.li3{ 
    				left:480px;
    			}
    			.li4{ 
    				left:640px;
    			}
    		</style>
    		
    		<script src="js/jquery-3.4.1.js"></script>
    	</head>
    	<body>
    		<div class="box">
    			<ul>
    				
    				<li class="li0">
    					<div class="cover"></div>
    					<img src="img/0.jpg" alt="" />
    				</li>
    				<li class="li1">
    					<div class="cover"></div>
    					<img src="img/1.jpg" alt="" />
    				</li>
    				<li class="li2">
    					<div class="cover"></div>
    					<img src="img/2.jpg" alt="" />
    				</li>
    				<li class="li3">
    					<div class="cover"></div>
    					<img src="img/3.jpg" alt="" />
    				</li>
    				<li class="li4">
    					<div class="cover"></div>
    					<img src="img/4.jpg" alt="" />
    				</li>
    			
    			</ul>	
    		</div>
    		
    		<script>
    			var lis=$(".box li");
    			//设置黑幕淡出效果
    			lis.mouseenter(function(){ 
    				$(this).find('.cover').stop(true).fadeOut();
    			});
    			//设置黑幕淡入效果
    			lis.mouseleave(function(){ 
    				$(this).find('.cover').stop(true).fadeIn();
    				//当鼠标离开时，动画变为初始位置
    				for(var i=0;i<lis.length;i++){ 
    					lis.eq(i).animate({ 'left':160*i},500);
    				}
    				
    			});
    			
    			$(".li0").mouseenter(function(){ 
    				//去除动画累计
    				lis.stop(true);
    				//计算当第一个图片完全展开时，其他图片分配的位置大小
    				for(var i=1;i<lis.length;i++){ 
    					lis.eq(i).animate({ 'left':560+(i-1)*60},500);
    				}
    
    		});
    			
    			$(".li1").mouseenter(function(){ 
    				//去除动画累计
    				lis.stop(true);
    				//计算当第二个图片完全展开时，其他图片分配的位置大小
    
    				lis.eq(1).animate({ 'left':60},500);
    				
    				for(var i=2;i<lis.length;i++)
    				{ 
    					lis.eq(i).animate({ 'left':620+(i-2)*60},500);
    				}
    
    		});
    			
    			$(".li2").mouseenter(function(){ 
    				//去除动画累计
    				lis.stop(true);
    				//计算当第三个图片完全展开时，其他图片分配的位置大小
    				
    			        lis.eq(1).animate({ 'left':60},500);
    			        lis.eq(2).animate({ 'left':120},500);
    
    				for(var i=3;i<lis.length;i++)
    				{ 
    					lis.eq(i).animate({ 'left':680+(i-3)*60},500);
    				}
    		});
    			$(".li3").mouseenter(function(){ 
    				//去除动画累计
    				lis.stop(true);
    				//计算当第四个图片完全展开时，其他图片分配的位置大小
    
    				lis.eq(4).animate({ 'left':740})
    				for(var i=0;i<4;i++)
    				{ 
    					lis.eq(i).animate({ 'left':60*i},500);
    				}
    		})
    			$(".li4").mouseenter(function(){ 
    				//去除动画累计
    				lis.stop(true);
    				//计算当第五个图片完全展开时，其他图片分配的位置大小
    				
    				
    				lis.eq(4).animate({ 'left':240},500);
    				for(var i=0;i<4;i++)
    				{ 
    					lis.eq(i).animate({ 'left':60*i},500);
    				}
    			})
    		</script>
    	</body>
    </html>

--------------------

jQ精简版

代码示例：