用Javascript DOM实现网页幻灯片动画实例

吴瑕

摘要：在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代码如下：

• Home
• About
• Photos
• Live
• Contact

Welcome

Welcome to the official website of Jay Skript and the Domsters. Here， you can learn more about the band…

因为本文重点介绍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.

【通联编辑：王力】