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