JavaScript DOM编程艺术—幻灯片动画
鼠标接触网页链接时，图片会移动的动画
目录结构
注：top.gif图片为400*100px的。
list.html
<!doucment html> <html> <head> <meta charset="utf-8" /> <title>Web Design</title> <link rel="stylesheet" href="layout.css" media="screen" /> </head> <body> <h1>Web Design</h1> <p>There are the things you should know</p> <ol id="linklist"> <li> <a href="structure.html">Structure</a> </li> <li> <a href="presentation.html">Presentation</a> </li> <li> <a href="behavior.html">Behavior</a> </li> </ol> <div id="slideshow"> <image src="topic.gif" id="preview" /> </div> <script src="addLoadEvent.js"></script> <script src="moveElement.js"></script> <script src="prepareSlideshow.js"></script> </body> </html>
layout.css
#slideshow{
width:100px;
height:100px;
position:relative;
overflow:hidden;
}
addLoadEvent.js
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}
else{
window.onload = function(){
oldonload();
func();
}
}
}
prepareSlideshow.js
/*幻灯片准备函数*/
function prepareSlideshow(){
var preview = document.getElementById('preview');
preview.style.position = "absolute";
preview.style.left = "0px";
preview.style.top = "0px";
var linklist = document.getElementById('linklist');
var links = linklist.getElementsByTagName('a');
links[0].onmouseover = function(){
moveElement("preview",-100,0,1);
}
links[1].onmouseover = function(){
moveElement("preview",-200,0,1);
}
links[2].onmouseover = function(){
moveElement("preview",-300,0,1);
}
}
addLoadEvent(prepareSlideshow);
moveElement.js
/*
将移动元素函数抽象
参数：元素，水平目的位置，垂直目的位置，时间间隔
*/
function moveElement(elementID,end_x,end_y,interval){
var elem = document.getElementById(elementID);
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if(elem.movement){
clearTimeout(elem.movement);
}
if(xpos == end_x &&ypos == end_y){
return true;
}
/*越靠近目的地速度越慢*/
if(xpos < end_x){
dist = Math.ceil((end_x-xpos)/10);
xpos = xpos + dist;
}
if(xpos > end_x){
dist = Math.ceil((xpos - end_x)/10);
xpos = xpos - dist;
}
if(ypos < end_y){
dist = Math.ceil((end_y-ypos)/10);
ypos = ypos + dist;
}
if(ypos > end_y){
dist = Math.ceil((ypos - end_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveMessage('"+elementID+"',"+end_x+","+end_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}