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 事件队列调整方法
Sep 18 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
JS一次前端面试经历记录
Mar 19 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生成xml简单实例代码
2009/12/16 PHP
PHP的PSR规范中文版
2013/09/28 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
ECMAScript 基础知识
2007/06/29 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
Python的Django框架中if标签的相关使用
2015/07/15 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
新闻专业应届生求职信
2013/10/31 职场文书
电子商务个人自荐信
2013/12/12 职场文书
学校后勤人员职责
2013/12/27 职场文书
大学总结自我鉴定
2014/01/18 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
人事科岗位职责范本
2014/03/02 职场文书
医院合作协议书
2014/08/19 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书