|
|
鼠標滑過上面的導航鏈接時 下面框中圖片進行流暢的切換，左右移動的效果
html結構如下：
復制代碼 代碼如下:
<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>
</body>
實在是很簡單啊。下面我們直接來看js代碼，先給出兩個輔助函數：
addLoadEvent
復制代碼 代碼如下:
function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload != "function") {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
這個函數顧名思義就是加載window的onload事件所要處理的方法
insertAfter
復制代碼 代碼如下:
function insertAfter(newElement, targetElement) {
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
在DOM API中有個insertBefore但是沒有insertAfter，所以這里自定義一個insertAfter方法，只要清楚appendChild和insertBefore這個函數很好理解，把newElement插入到targetElement之前。
接下來moveElement函數很核心：
moveElement
復制代碼 代碼如下:
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);
}
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);
if(xpos == final_x && ypos == final_y) {
return true;
}
if(xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if(xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if(ypos < final_y) {
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if(ypos > final_y) {
var 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);
}
final_x, final_y 分別為元素移動終止的left和top值，所以被移動元素要設置position屬性（"relative"或是"position"）,這樣它的left，top屬性才會起作用，這個函數也不難，就是取得元素當前的left和top值然后和final_x,final_y做比較，接著對其left和top按照一定的步長改變，每次的步長就是每個if中的dist變量，因為每次dist都會根據被移動元素的最新left，top計算，所以有一種先加速后減速的移動效果，參數interval，和setTimeout配合讓moveElement自我調用，直到元素移動到final_x和final_y.
接著是pepareSlideshow函數，動態的創建所需的dom元素：
prepareSlideshow
復制代碼 代碼如下:
function prepareSlideshow() {
//確保瀏覽器能理解DOM API
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
//確保該元素已存在
if(!document.getElementById("linklist")) return false;
var slideshow = document.createElement("div");
/*如果在css中設置這些屬性，此處可省
slideshow.style.position = "relative";
slideshow.style.overflow = "hidden";
slideshow.style.width = "100px";
slideshow.style.height = "100px";
*/
slideshow.setAttribute("id", "slideshow");
var preview = document.createElement("img");
/*如果在css中設置，此處可省
preview.style.position = "absolute";
*/
preview.setAttribute("src", "slideshow/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);
//獲得ol中所有的a元素
var links = list.getElementsByTagName("a");
//給每個a的mouseover事件附加上moveElement方法
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);
}
}
這里也就涉及到一些元素的創建，元素屬性的設置等基本的DOM API運用，然后給ol[id="linklist"]中的a元素附加鼠標moveover事件對應的moveElement方法，最后用addLoadEvent（prepareSlideshow）就行了，結合html和效果圖看，這個函數也是很好理解的。
代碼打包下載 http://www.jb51.NET/jiaoben/27501.html
JavaScript技術：DOM Scripting中的圖片切換[兼容Firefox]，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
