模块图片平铺、拉伸

最新推荐文章于 2021-08-18 12:53:02 发布

原创最新推荐文章于 2021-08-18 12:53:02 发布 · 549 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#模块图片平铺拉伸

css 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了一个简单的图片滑动布局实现方案，通过HTML和CSS搭建页面结构，并利用JavaScript为图片添加鼠标悬停时的位置变化效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考效果网址：点击打开链接

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%;
}