JS实现变速动画

最新推荐文章于 2022-12-13 21:10:17 发布

weixin_30916125

最新推荐文章于 2022-12-13 21:10:17 发布

阅读量180

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/oliverliu/p/6857171.html

版权

<!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(0)
      };
      box.onmouseout = function(){
        move(-200)
      };
    }

    var timer;

    function move(aim){
      clearInterval(timer);
      var box = document.getElementById('box');
      timer = setInterval(function(){
        var spd = (aim-box.offsetLeft)>=0?Math.ceil((aim-box.offsetLeft)/10):Math.floor((aim-box.offsetLeft)/10);
        if(box.offsetLeft == aim){
          clearInterval(timer);
        }else{
          box.style.left=box.offsetLeft+spd+'px';
        }
        console.log(spd,box.offsetLeft);
      },30);
    }

  </script>
</head>
<body>
  <div id="box" style=""><span id='share'>分享</span></div>
</body>
</html>

遇到的问题及注意事项：

1、运动函数传入的参数可以为目标距离，也可以为速度；考虑到变速运动，参数设成目标距离较好。

转载于:https://www.cnblogs.com/oliverliu/p/6857171.html

weixin_30916125

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现变速动画

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>JS实现变速动画</title> <style type="text/css"> *{margin:0;padding:0;} #box{...
复制链接

扫一扫