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 相关文章推荐
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 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
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
python进阶教程之文本文件的读取和写入
2014/08/29 Python
Python3计算三角形的面积代码
2017/12/18 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
python对视频画框标记后保存的方法
2018/12/07 Python
python获取txt文件词向量过程详解
2019/07/05 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
python随机模块random使用方法详解
2020/02/14 Python
python实现扫雷游戏
2020/03/03 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
倩碧美国官网:Clinique美国
2016/07/20 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
国税会议欢迎词
2014/01/16 职场文书
入党自我评价范文
2014/02/02 职场文书
大学专科自荐信
2014/06/17 职场文书
学生检讨书范文
2015/01/27 职场文书
裁员通知
2015/04/25 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python