简单JS动画之分享框实现教程
程序员文章站
2022-10-25 14:36:41
用js实现最简单的动画,用setinterval(fun(),milltime); 其中fun()是每隔milltime毫秒执行一次的函数。 以下是简陋效果图,当鼠标在分享位置上时...
用js实现最简单的动画,用setinterval(fun(),milltime); 其中fun()是每隔milltime毫秒执行一次的函数。 以下是简陋效果图,当鼠标在分享位置上时,红色p将从边上慢慢向右展示,当鼠标离开分享位置时,红色p将慢慢向左隐藏
详细代码:
<body> <p id="p1" > <span id="share">分享</span> </p> </body>
<style type="text/css"> *{ padding: 0; margin: 0; } p{ width: 200px; height: 200px; background-color: #f00; position: relative; left: -200px; } span{ width: 30px; height: 50px; background-color: aqua; position: absolute; top: 70px; left: 200px; text-align: center; } </style>
<script type="text/javascript"> var p1 = document.getelementbyid("p1"); var share = document.getelementbyid("share"); var timer = null; var speed = 0; p1.onmouseover = function(){ startmove(0); } p1.onmouseout = function(){ startmove(-200); } var startmove = function(target) { if(target >= 0){ speed = 10; }else { speed = -10; } clearinterval(timer); timer = setinterval(function () { if(p1.offsetleft == target){ clearinterval(timer); }else { p1.style.left = p1.offsetleft + speed + "px"; } }, 30); } </script>