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

来源：动视网责编：小采时间：2020-11-27 21:59:40

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

JS div匀速移动动画与变速移动动画代码实例:1.匀速移动代码 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>title</title> <style> * { margin: 0; padding: 0; } div

推荐度：

点击下载本文 文档为doc格式

导读JS div匀速移动动画与变速移动动画代码实例:1.匀速移动代码 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>title</title> <style> * { margin: 0; padding: 0; } div

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

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

JS div匀速移动动画与变速移动动画代码实例:1.匀速移动代码 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>title</title> <style> * { margin: 0; padding: 0; } div

推荐度：

点击下载本文 文档为doc格式

标签：运动移动动画

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐