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 相关文章推荐
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
javascript中的继承实例代码
Apr 27 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
node事件循环和process模块实例分析
Feb 14 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的伪静态模式
2015/12/31 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
python实现数据库跨服务器迁移
2018/04/12 Python
python模块smtplib学习
2018/05/22 Python
Django model反向关联名称的方法
2018/12/15 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
Linux中如何用命令创建目录
2015/01/12 面试题
毕业生多媒体设计求职信
2013/10/12 职场文书
电子商务应届生求职信
2013/11/16 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
美容院经理岗位职责
2014/04/03 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
处级干部考察材料
2014/12/24 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
nginx内存池源码解析
2021/11/20 Servers
Python借助with语句实现代码段只执行有限次
2022/03/23 Python
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js