<style>
* {
padding: 0;
margin: 0;
}
div {
width: 1150px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}
div ul {
width: 1300px;
}
li {
list-style: none;
width: 240px;
height: 400px;
float: left;
}
</style>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
//获取所有的li
var list = my$("box").getElementsByTagName("li");
//遍历li并添加图片,注册鼠标进入离开事件
for (var i = 0; i < list.length; i++) {
list[i].style.backgroundImage = "url(img/mi" + (i + 1) + ".jpg)";
list[i].onmouseover = mouseoverHandle;
list[i].onmouseout = mouseoutHandle;
}
function mouseoverHandle() {
for (var j = 0; j < list.length; j++) {
//动画效果,并让所有的宽度变为50
animate(list[j], {"width": 50});
}
//当前宽度设置为1000
animate(this, {"width": 1000});
}
function mouseoutHandle() {
for (var j = 0; j < list.length; j++) {
//鼠标离开,恢复所有原始宽度
animate(list[j], {"width": 240});
}
}
</script>