<!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>
JS侧边栏的显示和消失
猜你喜欢
转载自blog.csdn.net/yangyalun/article/details/79868791
今日推荐
周排行