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 上下滚动广告
Jun 17 Javascript
jQuery弹出(alert)select选择的值
Apr 21 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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/03/17 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
php实现简单的上传进度条
2015/11/17 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
在Python中使用next()方法操作文件的教程
2015/05/24 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
Python如何读取、写入CSV数据
2020/07/28 Python
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
店长岗位职责
2013/11/21 职场文书
葡萄牙语专业个人求职信
2013/12/10 职场文书
捐款活动总结
2014/08/27 职场文书
交通事故协议书范本
2014/11/18 职场文书
离婚协议书样本
2015/01/26 职场文书