demo 點擊圖片當前顯示變大弊攘,其他變小
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 1000px;
margin: 50px auto;
overflow: hidden;
}
.box ul{
list-style: none;
width: 4000px;
}
.box li{
float: left;
width: 200px;
}
</style>
<div class="box" id="box">
<ul id="ul">
<li>![](images/0.large.JPG)</li>
<li>![](images/1.large.jpg)</li>
<li>![](images/2.large.jpg)</li>
<li>![](images/3.large.JPG)</li>
<li>![](images/4.large.JPG)</li>
</ul>
</div>
<script src="JavaScript/base.js"></script> // 詳情 animate() 封裝
<script>
var box = document.getElementById("box");
var ul = document.getElementById("ul");
var lis = ul.children;
for(var i = 0;i<lis.length;i++){
lis[i].onmouseover = function(){
for(var j = 0;j<lis.length;j++){
animate(lis[j],{width:100})
}
animate(this,{width:600})
};
lis[i].onmouseout = function(){
for(var j = 0;j<lis.length;j++){
animate(lis[j],{width:200})
}
}
}
</script>
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者