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>
// 鼠標(biāo)移入哪種圖片, 圖片需要放大800px, 其余的位 100px
var lis = document.querySelectorAll('.box li')
for(var i = 0; i < lis.length; i++) {
// 移入的那個(gè)li寬度變?yōu)?00px
lis[i].onmouseenter = function() {
// 排他 首先所有的li都變?yōu)?00px
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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
