吳瑕

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

關(guān)鍵詞：Javascript DOM;幻燈片動畫

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

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

1 引言

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

2 設(shè)計與實現(xiàn)

2.1布局主頁

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

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

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

2.2 編寫JavascriptDOM腳本

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

2.2.1 insertAfter（）函數(shù)

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

functioninsertAfter（newE，targetE）{

var parent=targetE.parentNode;

if（parent.lastChild==targetE） {

parent.appendChild（newE）; }

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

} }

2.2.2 moveE（）函數(shù)

這個函數(shù)的功能是實現(xiàn)網(wǎng)頁元素移動，四個形式參數(shù)分別是：被移動對象的ID，移動目標位置left值，移動目標位置top值，調(diào)用移動函數(shù)的時間間隔。代碼如下：

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（）函數(shù)

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

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）;//創(chuàng)建圓角邊框元素，旨在把動畫效果放在一個小窗口里

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）;//創(chuàng)建幻燈片圖片元素preview，將其插入在“intro”段落之后

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

for （vari=0; i

links[i].onmouseover = function（） {

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

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

moveE（"preview"，0，0，5）;//設(shè)置移動動畫時間為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 小結(jié)

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

參考文獻：

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

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

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

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

【通聯(lián)編輯：王力】