吳瑕

摘要：在Web應用成為絕對主流的大背景下，友好的動畫交互可以給訪客帶來更好的瀏覽體驗，因此網站前端開發的重要性也越來越凸顯。本文就對網站前端開發的一個經典實例進行介紹：用Javascript DOM腳本在網站主頁實現幻燈片動畫。

關鍵詞：Javascript DOM;幻燈片動畫

中圖分類號：G642? ? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）04-0207-02

1 引言

由于大多數訪客都會首先訪問網站主頁，所以在主頁加入一些友好的動畫效果讓頁面更加炫酷，是當前網站前端開發的一種流行趨勢。因此網站前端開發技術也是網站開發人員學習和應用的一個重點技術。本文就對教學中實現的一個Javascript DOM主頁幻燈片動畫進行詳細介紹。

2 設計與實現

2.1布局主頁

先通過編寫HTML完成主頁內容，再通過CSS定義布局和顏色。主頁效果如圖1所示，當鼠標經過導航條，導航條下面的圖片以幻燈片播放效果快速流暢的切換成對應圖片，如圖2，當鼠標移動到“Live”，圖片切換成對應小圖。當鼠標放到“intro”段落中的鏈接上時，也會觸發同樣的幻燈片動畫。HTML代碼如下：

因為本文重點介紹JS實現，考慮到篇幅，CSS代碼省略。這里值得注意以下幾點：

1）為了讓導航中的鏈接水平排列，需要使用浮動布局。2）首先要為HTML5塊元素定義默認樣式，即使是那些不支持的瀏覽器，也能讓這些元素都具有適當的塊布局。3）使用通配選擇器把所有元素的內外邊距設置為零以確保不同瀏覽器有相同顯示效果。

2.2 編寫JavascriptDOM腳本

實現本例的幻燈片動畫效果，需要編寫3個函數，分別是：insertAfter（），moveE（），prepareSlideshow（），將這三個函數單獨保存為一個JS文件，在主頁中引入該JS文件。下面分別給出各函數代碼及功能介紹。

2.2.1 insertAfter（）函數

因為DOM中只提供了在已有元素前插入一個新元素的函數：insertBefore（），所以要實現在已有元素之后插入一個新元素要自己編寫insertAfter（）函數。代碼如下：

functioninsertAfter（newE，targetE）{

var parent=targetE.parentNode;

if（parent.lastChild==targetE） {

parent.appendChild（newE）; }

else{ parent.insertBefore（newE，targeE.nextSibling）;

} }

2.2.2 moveE（）函數

這個函數的功能是實現網頁元素移動，四個形式參數分別是：被移動對象的ID，移動目標位置left值，移動目標位置top值，調用移動函數的時間間隔。代碼如下：

functionmoveE（elemID，final_x，final_y，interval） {

if （！document.getElementById） return false;

if （！document.getElementById（elemID）） return false;

var e = document.getElementById（elemID）;

if （e.movement） {

clearTimeout（e.movement）;? }

if （！e.style.left） {

e.style.left = "0px";? }

if （！e.style.top） {

e.style.top = "0px";? }

varxp = parseInt（e.style.left）;

varyp = parseInt（e.style.top）;

if （xp == final_x&&yp == final_y） {

return true;? }

if （xp

vardist = Math.ceil（（final_x - xp）/10）;

xp = xp + dist;//讓元素每次向右移動它與目的地距離的十分之一，可以讓動畫效果更平滑，以下移動亦如此? }

if （xp>final_x） {

vardist = Math.ceil（（xp - final_x）/10）;

xp = xp - dist;? }

if （yp

vardist = Math.ceil（（final_y - yp）/10）;

yp= yp+ dist;? }

if （yp>final_y） {

vardist = Math.ceil（（yp - final_y）/10）;

yp = yp - dist;? }

e.style.left = xp + "px";

e.style.top = yp+ "px";

var repeat = "moveE（'"+elemID+"'，"+final_x+"，"+final_y+"，"+interval+"）";

e.movement = setTimeout（repeat，interval）;

}

2.2.3 prepareSlideshow（）函數

該函數是在網頁中的“intro”段落之后創建幻燈片圖片元素（slideshow.gif）并準備相應的鏈接，為每一個超鏈接綁定moveE（）函數。

functionprepareSlideshow（） {

if （！document.getElementsByTagName） return false;

if （！document.getElementById） return false;

if （！document.getElementById（"intro"）） return false;

var intro = document.getElementById（"intro"）;

var slideshow = document.createElement（"div"）;

slideshow.setAttribute（"id"，"slideshow"）;

var frame = document.createElement（"img"）;

frame.setAttribute（"src"，"images/frame.gif"）;

frame.setAttribute（"alt"，""）;

frame.setAttribute（"id"，"frame"）;

slideshow.appendChild（frame）;//創建圓角邊框元素，旨在把動畫效果放在一個小窗口里

var preview = document.createElement（"img"）;

preview.setAttribute（"src"，"images/slideshow.gif"）;

preview.setAttribute（"alt"，"a glimpse of what awaits you"）;

preview.setAttribute（"id"，"preview"）;

slideshow.appendChild（preview）;

insertAfter（slideshow，intro）;//創建幻燈片圖片元素preview，將其插入在“intro”段落之后

var links = document.getElementsByTagName（"a"）;//遍歷文檔中所有鏈接，讓鼠標放在任何一個超鏈接上，都會觸發幻燈片動畫

for （vari=0; i

links[i].onmouseover = function（） {

var destination = this.getAttribute（"href"）;

if （destination.indexOf（"index.html"） ！= -1） {

moveE（"preview"，0，0，5）;//設置移動動畫時間為5秒

}

if （destination.indexOf（"about.html"） ！= -1） {

moveE（"preview"，-150，0，5）;//如果鼠標指向鏈接的href屬性值是”about.html”，就把preview元素移動到-150px的位置? ? ? }

if （destination.indexOf（"photos.html"） ！= -1） {

moveE（"preview"，-300，0，5）;//如果鼠標指向鏈接的href屬性值是”photos.html”，就把preview元素移動到-300px的位置 }

if （destination.indexOf（"live.html"） ！= -1） {

moveE（"preview"，-450，0，5）;//如果鼠標指向鏈接的href屬性值是”live.html”，就把preview元素移動到-450px的位置（效果如圖2）? }

if （destination.indexOf（"contact.html"） ！= -1） {

moveE（"preview"，-600，0，5）;//如果鼠標指向鏈接的href屬性值是”contact.html”，就把preview元素移動到-600px的位置 }

}}}

3 小結

最后在JS文件末尾加上：Window.onloade=prepareSlideshow，讓頁面加載完即刻運行prepareSlideshow（）函數，便可實現很動感的主頁幻燈片效果。如果想讓網站增加交互功能和增強可用性，還可以利用JavascriptDOM腳步添加網頁圖片庫，增強表格，增強表單等功能，雖然把這些功能拿走，整個站點也可以正常運行，但有這些功能可以讓訪客有更好的體驗，所以DOM腳本編程是一項值得深入掌握的技術。

參考文獻：

[1] Jeremy Keith，JeffreySambells.JavaScript DOM編程藝術[M].北京：人民郵電出版社，2014.

[2] JavaScript與jQuery實戰教程[M].北京：清華大學出版社， 2015.

[3] https：//www.runoob.com/js/js-tutorial.html.

[4] https：//www.w3school.com.cn/js/index.asp.

【通聯編輯：王力】