《JavaScript DOM编程艺术》第十章用javascript实现动画效果

来源：互联网发布：一建试题软件编辑：程序博客网时间：2024/05/21 18:45

list.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>web Design</title>    <link href="css/layout2.css" rel="stylesheet" media="screen" /></head><body><p id="message">Wheel!</p><script type="text/javascript" src="scripts/addLoadEvent.js"></script><script type="text/javascript" src="scripts/positionMessage.js"></script></body></html>

positionMessage.js

addLoadEvent(positionMessage);//将元素指定到某个位置function positionMessage(){    var elem = document.getElementById('message');    elem.style.position = "relative";    elem.style.left="20px";    elem.style.top="50px";    elem.style.fontColor="red";    moveMessage("message",200,100,10)}//将移动元素函数抽象function moveMessage(elementID,final_x,final_y,interval){    var elem = document.getElementById(elementID);    var xpos = parseInt(elem.style.left);    var ypos = parseInt(elem.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--;}    elem.style.left = xpos + "px";    elem.style.top = ypos + "px";    var repeat = "moveMessage('"+elementID+"',"+final_x+","+final_y+","+interval+")";    movement = setTimeout(repeat,interval);}

阅读全文

0 0

《JavaScript DOM编程艺术》第十章 用javascript实现动画效果

《JavaScript DOM编程艺术》第十章用javascript实现动画效果