javascript实现动态侧边栏代码_javascript技巧

#div1{
    width:150px;
    height:200px;
    background:#999999;
    position:absolute;
    left:-150px;}
span{
    width:20px;
    height:70px;
    line-height:23px;
    background:#09C;
    position:absolute;
    right:-20px;
    top:70px;}

<script><BR>window.onload=function(){<BR> var odiv=document.getElementById('div1');<BR> odiv.onmouseover=function ()<BR> {<br><br> startmove(0,10);//第一个参数为div left属性的目标值 第二个为 每次移动多少像素<br><br> }<BR> odiv.onmouseout=function ()<BR> {<BR> startmove(-150,-10);<BR> }<BR> }<br><br> var timer=null;<BR>function startmove(target,speed)<BR>{<br><br> var odiv=document.getElementById('div1');<BR>clearInterval(timer);<BR> timer=setInterval(function (){<br><br> if(odiv.offsetLeft==target)<BR> {<BR> clearInterval(timer);<BR> }<BR> else<BR> { <BR> odiv.style.left=odiv.offsetLeft+speed+'px';<BR> }<br><br> },30)<br><br> }<br><br></script>