css
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.box {
width: 1200px;
height: 400px;
margin: 60px auto;
border: 1px solid #ccc;
overflow: hidden;
}
.box ul {
background: #eee;
overflow: hidden;
}
.box li {
height: 400px;
float: left;
width: 240px;
background-size: 800px 400px;
background-repeat: no-repeat;
transition: 1s all ease;
}
</style>
html
<body>
<div class="box">
<ul>
<li style="background-image: url(img/1.jpg)"></li>
<li style="background-image: url(img/2.jpg)"></li>
<li style="background-image: url(img/3.jpg)"></li>
<li style="background-image: url(img/4.jpg)"></li>
<li style="background-image: url(img/1.jpg)"></li>
</ul>
</div>
</body>
js
<script>
// 鼠标移入哪种图片, 图片需要放大800px, 其余的位 100px
var lis = document.querySelectorAll('.box li')
for(var i = 0; i < lis.length; i++) {
// 移入的那个li宽度变为800px
lis[i].onmouseenter = function() {
// 排他 首先所有的li都变为100px
for(var k = 0; k < lis.length; k++) {
lis[k].style.width = '100px'
}
this.style.width = '800px'
}
// 移出
lis[i].onmouseleave = function() {
for(var j = 0; j < lis.length; j++) {
lis[j].style.width = '240px'
}
}
}
</script>
网友评论