模块图片平铺、拉伸

本文介绍了一个简单的图片滑动布局实现方案,通过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%;
}




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值