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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
javascript事件函数中获得事件源的两种不错方法
Mar 17 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
基于Vue生产环境部署详解
Sep 15 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新建文件自动编号的思路与实现
2011/06/27 PHP
php array的学习笔记
2012/05/10 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
js DOM 元素ID就是全局变量
2012/09/20 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
React中如何引入Angular组件详解
2018/08/09 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
Python去除列表中重复元素的方法
2015/03/20 Python
python中map、any、all函数用法分析
2015/04/21 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
大数据分析用java还是Python
2020/07/06 Python
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
配件采购员岗位职责
2013/12/03 职场文书
保密协议书范本
2014/04/22 职场文书
华清池导游词
2015/02/02 职场文书
初中教师个人总结
2015/02/10 职场文书
督导岗位职责范本
2015/04/10 职场文书
Python包argparse模块常用方法
2021/06/04 Python