js-小效果-手风琴
Posted HuangRong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js-小效果-手风琴相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
#box{
width:500px;
height:300px;
border: 1px solid #000;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#box li{
width:500px;
height:300px;
position: absolute;
}
#box li img{
width:500px;
height:300px;
}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oBox=document.getElementById(‘box‘);
var aLi=oBox.children;
var w=30;
for(var i=1;i<aLi.length;i++){
aLi[i].style.left=oBox.offsetWidth-w*(aLi.length-i)+‘px‘;
}
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
for(var i=0;i<aLi.length;i++){
if(i<=this.index){
move(aLi[i],{left:w*i});
}else{
move(aLi[i],{left:oBox.offsetWidth-w*(aLi.length-i)});
}
}
}
}
}
</script>
</head>
<body>
<ul id="box">
<li><img src="img/banner1.jpg" /></li>
<li><img src="img/banner2.jpg" /></li>
<li><img src="img/banner3.jpg" /></li>
<li><img src="img/banner4.jpg" /></li>
<li><img src="img/banner5.jpg" /></li>
</ul>
</body>
</html>
以上是关于js-小效果-手风琴的主要内容，如果未能解决你的问题，请参考以下文章