標籤：js
#slideshow{width:100px;height:100px;position:relative; overflow:hidden;}
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Web Design</title><script src="addLoadEvent.js"></script><link rel="stylesheet" type="text/css" href="10.2.css" ><script src="10.2.js"></script> </head><body><h1>Web Design</h1><p>These 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"><img src="topics.gif" alt="building bolcks of web design" id="preview" /></div></body></html>
function addLoadEvent(func){ //不管在頁面載入完畢執行多少個函數，都應付自如var oldonload = window.onload;if(typeof window.onload != ‘function‘){window.onload = func;}else{window.onload = function(){oldonload();func();}}}//加快速度，距離越遠，速度越快，距離越近，速度越慢 function moveElement(elementID,final_x,final_y,interval){if(!document.getElementById) return false;if(!document.getElementById(elementID)) return false;var elem = document.getElementById(elementID);if(elem.movement){clearTimeout(elem.movement); //進行複位}var xpos = parseInt(elem.style.left); //parseInt(string)把字串裡面的數值資訊提取出來，因為後面要進行很多算術比較操作。var ypos = parseInt(elem.style.top); //parseFloat(string)可以把帶小數的數值（也就是浮點數）提取出來。var dist = 0;if(xpos == final_x && ypos == final_y){return true;}if(xpos < final_x){dist = Math.ceil(( final_x - xpos)/10); //Math.ceil是向上取整函數，它返回的是大於或等於函數參數，並且與之最接近的整數，防止移動距離小於1像素.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 = function() {moveElement(elementID, final_x,final_y,interval)} varrepeat = "moveElement(‘" + elementID + "‘," + final_x + "," + final_y + "," + interval + ")"; elem.movement = setTimeout(repeat,interval); //為元素建立屬性movement，element.property = value;}function prepareSlideshow(){//確保瀏覽器支援DOM方法。if(!document.getElementsByTagName) return false;if(!document.getElementById) return false;//確保元素存在。if(!document.getElementById("linklist")) return false;if(!document.getElementById("preview")) return false;//為圖片應用樣式。var preview = document.getElementById("preview");preview.style.position = "absolute";preview.style.left = "0px";preview.style.top = "0px";//取得列表中所有連結。var list = document.getElementById("linklist");var links = list.getElementsByTagName("a");//為mouseover事件添加動畫效果。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);}}addLoadEvent(prepareSlideshow);
圖片素材：
650) this.width=650;" src="http://s4.51cto.com/wyfs02/M01/82/0A/wKiom1dITTCxcMq6AAAO8DE9jPI648.gif-wh_500x0-wm_3-wmp_4-s_2639869525.gif" title="topics.gif" alt="wKiom1dITTCxcMq6AAAO8DE9jPI648.gif-wh_50" />
瀏覽器效果：
650) this.width=650;" src="http://s2.51cto.com/wyfs02/M02/82/09/wKioL1dITg6ydRZIAAAkeB6sH9k155.jpg-wh_500x0-wm_3-wmp_4-s_869280873.jpg" title="36020160527210224875.jpg" alt="wKioL1dITg6ydRZIAAAkeB6sH9k155.jpg-wh_50" />
js滑鼠懸浮動畫：由一個位置移動到另外一個位置，速度由快變慢[修正版2]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
