JS div匀速移动动画与变速移动动画代码实例

2024-05-06 16:49:25

字体：大中小

来源：转载

供稿：网友

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匀速移动动画与变速移动动画详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对VeVb武林网网站的支持！

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：详解javascript设计模式三：代理模式

下一篇：node之本地服务器图片上传的方法示例

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿创2023年5月以来最大单周涨幅

2024-04-27 13:35:46

雷军：小米正在申请3万件专利，以提升自身的竞争力

2024-04-27 13:33:47

人参泡酒15年后竟“复活”？网友：这酒还能喝不？

2024-04-24 22:53:44

芯片股普涨！英伟达市值一夜大涨6000亿元

2024-04-23 19:32:50

面馆老板1天卖100碗刚够交房租要卖到150碗才能实现盈利

2024-04-23 19:25:50

跌近30%！茶百道上市一小时跌没3年净利润

2024-04-23 19:13:19

疑难解答

图片精选

网友关注