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勻速移動動畫與變速移動動畫詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
