首页 > 代码库 > JS实现边栏弹出动画
JS实现边栏弹出动画
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS实现边栏弹出动画</title> <style type="text/css"> *{margin:0;padding:0;} #box{width:200px;height:200px;background-color:#ccc;position:absolute;left:-200px;top:500px;} #share{display:block;font-size:16px;line-height:30px;font-family:微软雅黑;text-align:center;width:24px;height:60px;background-color:orange;position:absolute;left:200px;top:70px;} </style> <script type="text/javascript"> window.onload=function(){ var box=document.getElementById("box"); box.onmouseover = function(){ move(10) }; box.onmouseout = function(){ move(-10) }; } var timer; function move(spd){ clearInterval(timer); var box = document.getElementById(‘box‘); timer = setInterval(function(){ console.log(box.offsetLeft); if(box.offsetLeft == -100+10*spd){ clearInterval(timer); }else{ box.style.left=box.offsetLeft+spd+‘px‘; } },30); } </script> </head> <body> <div id="box" style=""><span id=‘share‘>分享</span></div> </body> </html>
遇到的问题及注意事项:
1、offset属性的值是数字,没有‘px’单位。
2、element.style只能获取内联式CSS的属性及用element.style.*=‘ ’设置的属性。非内联式CSS的属性使用element.getAttribute()方法获取。
JS实现边栏弹出动画
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。