10.1—最简单的动画
***代码亲测可用***
动画：让元素位置随着时间而不断地发生变化
HTML：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>jiaxinjia</title> <script src="script/01.js"></script> </head> <body > <h1>what is your name?</h1> <p id="zxc">WDFEVS!</p> <img src="img/2.jpg" id="asd" width="50" height="50"/> </body> </html>
JS：
function positionq(){ var po = document.getElementById("zxc"); po.style.position="absolute"; po.style.left = "50px"; po.style.top = "100px"; moveElement("zxc", 500, 300, 20); var po2 = document.getElementById("asd"); po2.style.position = "absolute"; po2.style.left = "50px"; po.style.top = "150px"; moveElement("asd", 500, 400, 30); } function moveElement(element, final_x, final_y, interval){ var po = document.getElementById(element); var xpos = parseInt(po.style.left); var ypos = parseInt(po.style.top); if(xpos == final_x && ypos == final_y) return true; if(xpos>final_x){ xpos--; } if(xpos<final_x){ xpos++; } if(ypos>final_y){ ypos--; } if(ypos<final_y){ ypos++; } po.style.left = xpos +"px"; po.style.top = ypos +"px"; var repeat = "moveElement('"+element+"',"+final_x+","+final_y+","+interval+")"; movement = setTimeout(repeat, interval); } function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != "function"){ window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } } } addLoadEvent(positionq);
***end***