手风琴效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
width: 1300px;
height: 400px;
margin: 50px auto;
list-style: none;
}
li {
width: 240px;
height: 400px;
background: blue;
float: left;
transition: 0.5s;
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script type="text/javascript">
var Ul=document.getElementsByTagName('ul')[0];
var list=Ul.children;
for(var i=0; i<list.length; i++){
list[i].onmousemove=function(){
for(var j=0; j<list.length;j++){
list[j].style.width=100+'px';
}
this.style.width=800+'px';
}
Ul.onmouseout=function(){
for(var k=0; k<list.length;k++){
list[k].style.width=240+'px';
}
}
}
</script>
</html>
3175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
