实用的动画效果：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>实用的动画效果</title> <style> #slideshow{ width: 100px; height: 100px; position: relative; overflow: hidden;} #preview { position: absolute;} </style> </head> <body> <h1>网页设计</h1> <p>你应该知道事情</p> <ol id="linklist"> <li><a href="structure.html">结构</a></li> <li><a href="presentation.html">表现</a></li> <li><a href="behavior.html">行为</a></li> </ol> <script> function insertAfter(newElement,targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appendChild(newElement); }else{ parent.insertBefore(newElement,targetElement.nextSibling); } } function moveElement(elementID,final_x,final_y,interval){ var elem = document.getElementById(elementID); if (elem.movement) { clearTimeout(elem.movement) } if(!elem.style.left){ elem.style.left = '0px'; } if(!elem.style.top){ elem.style.top = '0px'; } var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); var dist = 0; if(xpos == final_x && ypos == final_y){ return true; } if(xpos < final_x){ dist = Math.ceil((final_x - xpos)/10); xpos = xpos + dist; } if(xpos > final_x){ dist = Math.ceil((xpos - final_x)/10); xpos = xpos - dist; } if(ypos < final_y){ dist = Math.ceil((final_y - ypos)/10); ypos = ypos + dist; } if(ypos > final_y){ dist = Math.ceil((ypos - final_y)/10); ypos = ypos - dist; } elem.style.left = xpos + "px"; elem.style.top = ypos + "px"; var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; elem.movement = setTimeout(repeat,interval); } function prepareSlideshow(){ // var preview = document.getElementById('preview'); // preview.style.position = 'absolute'; // preview.style.left = '0px'; // preview.style.top = '0px'; var slideshow = document.createElement('div'); slideshow.setAttribute('id','slideshow'); var preview = document.createElement('img'); preview.setAttribute('src','img/topics.gif'); preview.setAttribute('alt','building blocks of web design'); preview.setAttribute('id','preview'); slideshow.appendChild(preview); var list = document.getElementById('linklist'); insertAfter(slideshow,list); var list = document.getElementById('linklist'); var links = list.getElementsByTagName('a'); links[0].onmouseover = function(){ moveElement("preview", -100,0,10); } links[1].onmouseover = function(){ moveElement("preview", -200,0,10); } links[2].onmouseover = function(){ moveElement("preview", -300,0,10); } } prepareSlideshow(); </script> </body> </html>
这份文档中，结构层、表示层和行为层，已经分离的比较彻底了。如果禁用了页面中不会出现动画图片。