<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>滑出导航栏</title> <style> body,div,span{ margin: 0; padding: 0; } #div1{ width: 200px; height: 200px; background: red; position: relative; left:-200px; top:200px; } #div1 span{ width: 20px; height: 50px; background: blue; position: absolute; left: 200px; top:75px; } </style> <script> window.onload=function(){ var v=document.getELementById("div1"); v.onmouseover=function(){ star(); v.onmouseout=function(){ star1(); } } } var timer=null; function star(){ clearInterval(timer); var v=document.getELementById("div1"); timer=setInterval(function(){ if(v.offsetLeft==0){ clearInterval(timer); } else{ v.style.left=v.offsetLeft+10+"px"; } },30) } function star1(){ clearInterval(timer); var v=document.getELementById("div1"); timer=setInterval(function(){ if(v.offsetLeft==-200){ clearInterval(timer); } else{ v.style.left=v.offsetLeft-10+"px"; } },30) } </script> <body> <div id="div1"> <span id="share">分享</span> </div> </body> </html>
回夢
相关分类