JavaScript DOM编程艺术—幻灯片动画

来源：互联网发布：嘉兴学院雅尔网络课程编辑：程序博客网时间：2024/05/16 07:52

鼠标接触网页链接时，图片会移动的动画

目录结构

注：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);}

0 0