標籤：head etl padding round doc asc utf-8 time idt
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } div { margin-top: 10px; width: 100px; height: 50px; background-color: purple; position: absolute; } </style></head><body><input type="button" value="移動到400px" id="bt1"/><input type="button" value="移動到800px" id="bt2"/><div id="dv"></div><script src="common.js"></script><script> my$("bt1").onclick = function () { //擷取div當前的left值 var left = my$("dv").offsetLeft; var step = 10; timeId = setInterval(function () { if (left <= 400) { left += step; my$("dv").style.left = left + "px"; console.log(left); } else { clearInterval(timeId); } }, 10) }; my$("bt2").onclick = function () { //擷取div當前的left值 var left = my$("dv").offsetLeft; var step = 10; timeId = setInterval(function () { if (left <= 800) { left += step; my$("dv").style.left = left + "px"; console.log(left); } else { clearInterval(timeId); } }, 10) };</script></body></html>
JavaScript div移動動畫
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
