JS側邊欄的顯示和消失
阿新 • • 發佈:2019-02-12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ width: 200px; height: 250px; background: rebeccapurple; position: absolute; left: -200px; } #div1 span{ width: 20px; position: absolute; background: red; top: 80px; right: -20px; color: white; } </style> <script> window.onload=function () { var oDiv = document.getElementById("div1"); oDiv.onmouseover=function () { move(0,10); } oDiv.onmouseout=function () { move(-200,-10); } } var timer=null; function move(target,speed) { var oDiv = document.getElementById("div1"); clearInterval(timer); timer=setInterval(function () { if(oDiv.offsetLeft==target) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },30) } </script> </head> <body> <div id="div1"> <span id="span1">分享到</span> </div> </body> </html>