1.勻速移動(dòng)代碼
<!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="移動(dòng)到400px" id="btn1"/><input type="button" value="移動(dòng)到800px" id="btn2"/><div id="dv"> <script src="common.js"></script> <script> //點(diǎn)擊按鈕移動(dòng)div my$("btn1").onclick = function () { animate(my$("dv"), 400); }; my$("btn2").onclick = function () { animate(my$("dv"), 800); }; //勻速動(dòng)畫(huà) function animate(element, target) { //清理定時(shí)器 clearInterval(element.timeId); element.timeId = setInterval(function () { //獲取元素的當(dāng)前位置 var current = element.offsetLeft; //移動(dòng)的步數(shù) 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.變速移動(dòng)代碼
<!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="移動(dòng)到400px" id="btn1"/><input type="button" value="移動(dòng)到800px" id="btn2"/><div id="dv"> <script src="common.js"></script> <script> //點(diǎn)擊按鈕移動(dòng)div my$("btn1").onclick = function () { animate(my$("dv"), 400); }; my$("btn2").onclick = function () { animate(my$("dv"), 800); }; //變速動(dòng)畫(huà) function animate(element, target) { //清理定時(shí)器 clearInterval(element.timeId); element.timeId = setInterval(function () { //獲取元素的當(dāng)前位置 var current = element.offsetLeft; //移動(dòng)的步數(shù) var step = (target-current)/10; step = step>0?Math.ceil(step):Math.floor(step); current += step; element.style.left = current + "px"; if(current==target) { //清理定時(shí)器 clearInterval(element.timeId); } }, 20); } </script></div></body></html>common.js
/** * 獲取指定標(biāo)簽對(duì)象 * @param id 標(biāo)簽的id屬性值 * @returns {Element}根據(jù)id屬性值返回指定標(biāo)簽對(duì)象 */function my$(id) { return document.getElementById(id);}以上所述是小編給大家介紹的JS div勻速移動(dòng)動(dòng)畫(huà)與變速移動(dòng)動(dòng)畫(huà)詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
