模組圖片平鋪、拉伸

spfLinux發表於2018-01-28

參考效果網址：點選開啟連結

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.onmouseover=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.onmouseover=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.onmouseover=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.onmouseover=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.onmouseover=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.onmouseover=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.onmouseout=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%;
}




相關文章