参考效果网址:点击打开链接
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%;
}