时间:2021-07-01 10:21:17 帮助过:2人阅读
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匀速移动动画与变速移动动画详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!