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


Posted in Javascript onMarch 26, 2019

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匀速移动动画与变速移动动画详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
移动节点的jquery代码
Jan 13 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
javascript 闭包详解
Feb 15 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 #Javascript
详解用JS添加和删除class类名
Mar 25 #Javascript
详解javascript设计模式三:代理模式
Mar 25 #Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 #Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 #Javascript
9102了,你还不会移动端真机调试吗
Mar 25 #Javascript
详解原生JS回到顶部
Mar 25 #Javascript
You might like
PHP函数utf8转gb2312编码
2006/12/21 PHP
php array_merge下进行数组合并的代码
2008/07/22 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
python 队列详解及实例代码
2016/10/18 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
python如何停止递归
2020/09/09 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
控制工程专业个人求职信
2013/09/25 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
《散步》教学反思
2014/03/02 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
本科生就业推荐信
2014/05/19 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
践行三严三实心得体会
2014/10/13 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL