1. JS div匀速移动动画与变速移动动画代码实例

     更新时间:2019年03月26日 08:43:35   作者:夏沐_lk   我要评论

    这篇文章主要介绍了JS div匀速移动动画与变速移动动画,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    1.匀速移动代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>title</title>
     <style>
      * {
       margin: 0;
       padding: 0;
      }
     
      div {
       margin-top: 20px;
       width: 200px;
       height: 100px;
       background-color: green;
       position: absolute;
       left: 0;
       top: 0;
      }
     </style>
    </head>
    <body>
    <input type="button" value="移动到400px" id="btn1"/>
    <input type="button" value="移动到800px" id="btn2"/>
    <div id="dv">
     <script src="common.js"></script>
     <script>
      //点击按钮移动div
     
      my$("btn1").onclick = function () {
       animate(my$("dv"), 400);
      };
      my$("btn2").onclick = function () {
       animate(my$("dv"), 800);
      };
     
      //匀速动画
      function animate(element, target) {
       //清理定时器
       clearInterval(element.timeId);
       element.timeId = setInterval(function () {
        //获取元素的当前位置
        var current = element.offsetLeft;
        //移动的步数
        var step = 10;
        step = target > current ? step : -step;
        current += step;
        if (Math.abs(current - target) > Math.abs(step)) {
         element.style.left = current + "px";
        } else {
         clearInterval(element.timeId);
         element.style.left = target + "px";
        }
       }, 20);
      }
     </script>
    </div>
    </body>
    </html>

    2.变速移动代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>title</title>
     <style>
      * {
       margin: 0;
       padding: 0;
      }
     
      div {
       margin-top: 20px;
       width: 200px;
       height: 100px;
       background-color: green;
       position: absolute;
       left: 0;
       top: 0;
      }
     </style>
    </head>
    <body>
    <input type="button" value="移动到400px" id="btn1"/>
    <input type="button" value="移动到800px" id="btn2"/>
    <div id="dv">
     <script src="common.js"></script>
     <script>
      //点击按钮移动div
     
      my$("btn1").onclick = function () {
       animate(my$("dv"), 400);
      };
      my$("btn2").onclick = function () {
       animate(my$("dv"), 800);
      };
     
      //变速动画
      function animate(element, target) {
       //清理定时器
       clearInterval(element.timeId);
       element.timeId = setInterval(function () {
        //获取元素的当前位置
        var current = element.offsetLeft;
        //移动的步数
        var step = (target-current)/10;
        step = step>0?Math.ceil(step):Math.floor(step);
        current += step;
        element.style.left = current + "px";
        if(current==target) {
         //清理定时器
         clearInterval(element.timeId);
        }
        
       }, 20);
      }
     </script>
    </div>
    </body>
    </html>

    common.js

    /**
     * 获取指定标签对象
     * @param id 标签的id属性值
     * @returns {Element}根据id属性值返回指定标签对象
     */
    function my$(id) {
      return document.getElementById(id);
    }

    以上所述是小编给大家介绍的JS div匀速移动动画与变速移动动画详解整合,希望对大家有所帮助,如果大家有任?#25105;?#38382;请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

  2. 解读JavaScript中 For, While与递归的用法

    解读JavaScript中 For, While与递归的用法

    本篇文章对JavaScript中 For, While与递归的用法进行了详细的分析介绍。需要的朋友参考下
    2013-05-05
  3. JavaScript DOM 学习第三章 内容表格

    JavaScript DOM 学习第三章 内容表格

    在这一章?#19968;?#35299;释我的网站上的所有页面都在运行的内容表格的代码。他会生产这个页面的所有h3和h4的列表,?#32531;?#32473;他们添加一个链接。
    2010-02-02
  4. js?#35745;?#39044;加载示例

    js?#35745;?#39044;加载示例

    这篇文章主要介绍了js?#35745;?#39044;加载示例,需要的朋友可以参考下
    2014-04-04
  5. JavaScript必知必会(七)js对象继承

    JavaScript必知必会(七)js对象继承

    这篇文章主要介绍了JavaScript必知必会(七)js对象继承的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  6. 5个最顶级jQuery图表类库插件【jquery插件库】

    5个最顶级jQuery图表类库插件【jquery插件库】

    这篇文章主要介绍了5个最顶级jQuery图表类库插件【jquery插件库】,需要的朋友可以参考下
    2016-05-05
  7. JavaScript的继承实?#20013;?#32467;

    JavaScript的继承实?#20013;?#32467;

    JavaScript作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继?#24515;兀?#26412;文将给大家揭开神秘面纱
    2017-05-05
  8. js 编写规范

    js 编写规范

    js输写最好还是可以面向对象方式 用类方向进行包装 js输写两种方式 闭包 原型
    2010-03-03
  9. Javascript字符串对象的常用方法简明版

    Javascript字符串对象的常用方法简明版

    这篇文章主要介绍了Javascript字符串对象的常用方法简明版,本文用一个代码例子列表了Javascript字符串对象的一些常用方法,例如加粗、斜体、删除线、上标、下标、大小?#30784;?#26597;找字符、替换字符等,需要的朋友可以参考下
    2014-06-06
  10. 分析Node.js connect ECONNREFUSED错误

    分析Node.js connect ECONNREFUSED错误

    最近在准备Angularjs +node.js demo的时候在我的mac开发中 遇见此错误
    2013-04-04
  11. 最新评论

    常用在线小工具

    山东群英会开奖查询