本文实例讲述了JS运动框架之分享侧边栏动画实现方法。分享给大家供大家参考。具体实现方法如下： 复制代码 代码如下: <br /> *{ <br /> margin:0px; <br /> padding:0px; <br /> } <br /> #div1{ <br /> width:319px; <br /> height: 340px; <br /> border: 1px solid #FFF; <br /> position: absolute; <br /> top:100px; <br /> left:-320px; <br /> background-image: url(images/1.png); <br /> background-repeat:no-repeat ; <br /> } <br /> #div1 span{ <br /> width:30px; <br /> height: 130px; <br /> border: 1px solid blue; <br /> position: absolute; <br /> right:-23px; <br /> top:95px; <br /> background: red; <br /> font-family: "微软雅黑"; <br /> color: #FFFFFF; <br /> text-align: center; <br /> line-height: 40px; <br /> border-radius: 0px 200px 200px 0px; <br /> } <br /> <br /> window.onload=function(){ <br /> var oDiv=document.getElementById("div1"); <br /> var oSpan=oDiv.getElementsByTagName('span')[0]; <br /> var time=null; <br /> var speed=8; <br /> oDiv.onmouseover=function(){//这里给整个div加鼠标移入的事件 <br /> clearInterval(time); <br /> time=setInterval(function(){ <br /> if(oDiv.offsetLeft>=0){clearInterval(time);} <br /> else{ <br /> oDiv.style.left=oDiv.offsetLeft+speed+'px'; <br /> } <br /> },1); <br /> } <br /> oDiv.onmouseout=function(){//这里给整个div加鼠标移出事件<br /> clearInterval(time); <br /> time=setInterval(function(){ <br /> if(oDiv.offsetLeft<=-320){clearInterval(time);} <br /> else{ <br /> oDiv.style.left=oDiv.offsetLeft-speed+'px'; <br /> } <br /> },1); <br /> } <br /> } <br /> 分享到 优化后的代码: 复制代码 代码如下: <br /> *{ <br /> margin:0px; <br /> padding:0px; <br /> } <br /> #div1{ <br /> width:319px; <br /> height: 340px; <br /> border: 1px solid #FFF; <br /> position: absolute; <br /> top:100px; <br /> left:-320px; <br /> background-image: url(images/1.png); <br /> background-repeat:no-repeat ; <br /> } <br /> #div1 span{ <br /> width:30px; <br /> height: 130px; <br /> border: 1px solid blue; <br /> position: absolute; <br /> right:-23px; <br /> top:95px; <br /> background: red; <br /> font-family: "微软雅黑"; <br /> color: #FFFFFF; <br /> text-align: center; <br /> line-height: 40px; <br /> border-radius: 0px 200px 200px 0px; <br /> } <br /> <br /> window.onload=function(){ <br /> var oDiv=document.getElementById("div1"); <br /> var oSpan=oDiv.getElementsByTagName('span')[0]; <br /> var time=null; <br /> var spe=8; <br /> var speed=null; <br /> function move(bord){ <br /> clearInterval(time); <br /> time=setInterval(function(){ <br /> if(oDiv.offsetLeft>bord){speed=-spe;} <br /> else{speed=spe;} <br /> if(oDiv.offsetLeft==bord){clearInterval(time);} <br /> else{ <br /> oDiv.style.left=oDiv.offsetLeft+speed+'px'; <br /> } <br /> },1); <br /> } <br /> oDiv.onmouseover=function(){//这里给整个div加鼠标移入的事件<br /> move(0); <br /> } <br /> oDiv.onmouseout=function(){//这里给整个div加鼠标移出事件<br /> move(-320); <br /> } <br /> } <br /> 分享到 希望本文所述对大家的javascript程序设计有所帮助。
