模块图片平铺、拉伸

r囧r小猫 2022-06-01 11:41 164阅读 0赞

参考效果网址：[点击打开链接][Link 1]

index.html

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    	<div class="imgs" id="imgs">
    		<img src="imgs/1.jpg" id="img1">
    		<img src="imgs/2.jpg" id="img2">
    		<img src="imgs/3.jpg" id="img3">
    		<img src="imgs/4.jpg" id="img4">
    		<img src="imgs/5.jpg" id="img5">
    		<img src="imgs/6.jpg" id="img6">
    	</div>
    
    	<script type="text/javascript">
    		function getId(id){
    			return document.getElementById(id);
    		}
    		img1.οnmοuseοver=function(){
    			getId("img2").style.left="40%";
    			getId("img3").style.left="52%";
    			getId("img4").style.left="64%";
    			getId("img5").style.left="76%";
    			getId("img6").style.left="88%";
    		}
    		img2.οnmοuseοver=function(){
    			getId("img2").style.left="13%";
    			getId("img3").style.left="52%";
    			getId("img4").style.left="64%";
    			getId("img5").style.left="76%";
    			getId("img6").style.left="88%";
    		}
    		img3.οnmοuseοver=function(){
    			getId("img2").style.left="10%";
    			getId("img3").style.left="20%";
    			getId("img4").style.left="60%";
    			getId("img5").style.left="76%";
    			getId("img6").style.left="88%";
    		}
    		img4.οnmοuseοver=function(){
    			getId("img2").style.left="10%";
    			getId("img3").style.left="20%";
    			getId("img4").style.left="40%";
    			getId("img5").style.left="76%";
    			getId("img6").style.left="88%";
    		}
    		img5.οnmοuseοver=function(){
    			getId("img2").style.left="10%";
    			getId("img3").style.left="24%";
    			getId("img4").style.left="38%";
    			getId("img5").style.left="52%";
    			getId("img6").style.left="88%";
    		}
    		img6.οnmοuseοver=function(){
    			getId("img2").style.left="10%";
    			getId("img3").style.left="24%";
    			getId("img4").style.left="38%";
    			getId("img5").style.left="52%";
    			getId("img6").style.left="66%";
    		}
    		imgs.οnmοuseοut=function(){
    			getId("img1").style.left="0%";
    			getId("img2").style.left="17%";
    			getId("img3").style.left="34%";
    			getId("img4").style.left="51%";
    			getId("img5").style.left="68%";
    			getId("img6").style.left="85%";
    		}
    	</script>
    </body>
    </html>

style.css

.imgs{
    	position: absolute;
    	left: 5%;
    	top: 50px;
    	width: 780px;
    	height: 107px;
    	overflow: hidden;
    	background: #ddd;
    	cursor: pointer;
    }
    .imgs>img{
    	transition: all 1s;
    }
    .imgs>img:nth-child(1){
    	position: absolute;
    	left: 0%;
    }
    .imgs>img:nth-child(2){
    	position: absolute;
    	left: 17%;
    }
    .imgs>img:nth-child(3){
    	position: absolute;
    	left: 34%;
    }
    .imgs>img:nth-child(4){
    	position: absolute;
    	left: 51%;
    }
    .imgs>img:nth-child(5){
    	position: absolute;
    	left: 68%;
    }
    .imgs>img:nth-child(6){
    	position: absolute;
    	left: 85%;
    }

[Link 1]: https://www.eflagcomm.com/zh/network-services.html