用Javascript DOM实现网页幻灯片动画实例
吴瑕
（四川职业技术学院计算机科学系，四川遂宁629000）
摘要：在Web应用成为绝对主流的大背景下，友好的动画交互可以给访客带来更好的浏览体验，因此网站前端开发的重要性也越来越凸显。本文就对网站前端开发的一个经典实例进行介绍：用Javascript DOM脚本在网站主页实现幻灯片动画。
关键词：Javascript DOM；幻灯片动画
中图分类号：G642文献标识码：A
文章编号：1009-3044(2021)04-0207-02开放科学（资源服务）标识码（OSID）：
1引言
由于大多数访客都会首先访问网站主页，所以在主页加入
一些友好的动画效果让页面更加炫酷，是当前网站前端开发的
一种流行趋势。因此网站前端开发技术也是网站开发人员学
习和应用的一个重点技术。本文就对教学中实现的一个Javas⁃
cript DOM主页幻灯片动画进行详细介绍。
2设计与实现
2.1布局主页
先通过编写HTML完成主页内容，再通过CSS定义布局和颜。主页效果如图1所示，当鼠标经过导航条，导航条下面的图片以幻灯片播放效果快速流畅的切换成对应图片，如图2，当鼠标移动到“Live”，图片切换成对应小图。当鼠标放到“in⁃tro”段落中的链接上时，也会触发同样的幻灯片动画。HTML 代码如下：
<header>
<imgsrc="images/logo.gif"alt="Jay Skript and the Domsters" />
<nav><ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul></nav>
</header>
<article>
<h1>Welcome</h1>
<p id="intro">Welcome to the
official website of Jay Skript
and the Domsters.Here,you can<a href="about.html">learn more about the band</a>…</p>
</article>
因为本文重点介绍JS实现，考虑到篇幅，CSS代码省略。这里值得注意以下几点：
1）为了让导航中的链接水平排列，需要使用浮动布局。2）首先要为HTML5块元素定义默认样式，即使是那些不支持的浏览器，也能让这些元素都具有适当的块布局。3）使用通配选择器把所有元素的内外边距设置为零以确保不同浏览器有相同显示效果。
图1主页初始效果
图2鼠标移到导航条“Live”的页面效果
2.2编写JavascriptDOM脚本
实现本例的幻灯片动画效果，需要编写3个函数，分别是：insertAfter()，moveE()，prepareSlideshow()，将这三个函数单独保存为一个JS文件，在主页中引入该JS文件。下面分别给出各函数代码及功能介绍。
收稿日期：2020-09-14
作者简介：吴瑕（1983—），女，四川遂宁人，四川职业技术学院计算机科学系，副教授，工程硕士，研究方向为计算机应用、Web前端。
2.2.1insertAfter()函数
因为DOM中只提供了在已有元素前插入一个新元素的函数：insertBefore()，所以要实现在已有元素之后插入一个新元素要自己编写insertAfter()函数。代码如下：
functioninsertAfter(newE,targetE){
var parent=targetE.parentNode;
if(parent.lastChild==targetE){
parent.appendChild(newE);}
else{parent.insertBefore(Sibling); }}
2.2.2moveE()函数
这个函数的功能是实现网页元素移动，四个形式参数分别是：被移动对象的ID，移动目标位置left值，
移动目标位置top 值，调用移动函数的时间间隔。代码如下：functionmoveE(elemID,final_x,final_y,interval){
if(!ElementById)return false;
if(!ElementById(elemID))return false;
var ElementById(elemID);
vement){
vement);}
if(!e.style.left){
e.style.left="0px";}
if(!p){
p="0px";}
varxp=parseInt(e.style.left);
varyp=parseInt(p);
if(xp==final_x&&yp==final_y){
return true;}
if(xp<final_x){
il((final_x-xp)/10);
xp=xp+dist;//让元素每次向右移动它与目的地距离的十分之一，可以让动画效果更平滑，以下移动亦如此}
if(xp>final_x){
il((xp-final_x)/10);
xp=xp-dist;}
if(yp<final_y){
il((final_y-yp)/10);
yp=yp+dist;}
if(yp>final_y){
il((yp-final_y)/10);
yp=yp-dist;}
e.style.left=xp+"px";
p=yp+"px";
var repeat="moveE('"+elemID+"',"+final_x+","+final_y+", "+interval+")";
}
2.2.3prepareSlideshow()函数
该函数是在网页中的“intro”段落之后创建幻灯片图片元素（slideshow.gif）并准备相应的链接，为每一个超链接绑定mo⁃veE()函数。functionprepareSlideshow(){
if(!ElementsByTagName)return false;
if(!ElementById)return false;
if(!ElementById("intro"))return false;
var ElementById("intro");
var ateElement("div"); slideshow.setAttribute("id","slideshow");
var ateElement("img"); frame.setAttribute("src","images/frame.gif"); frame.setAttribute("alt","");
frame.setAttribute("id","frame"); slideshow.appendChild(frame);//创建圆角边框元素，旨在把动画效果放在一个小窗口里
var ateElement("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 ElementsByTagName("a");//遍历文档中所有链接，让鼠标放在任何一个超链接上，都会触发幻灯片动画
for(vari=0;i<links.length;i++){
links[i].onmouseover=function(){
var Attribute("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文件末尾加上：loade=prepareSlide⁃show，让页面加载完即刻运行prepareSlideshow()函数，便可实现很动感的主页幻灯片效果。如果想让网站增加交互功能和增强可用性，还可以利用JavascriptDOM脚步添加网页图片库，增强表格，增强表单等功能，虽然把这些功能拿走，整个站点也可
（下转第212页）
社会发展趋势、极大满足学习者的学习需要。学习形式方面，拓展学习强调教育教学的开放性，到社会中去，到生活中去，让学习者从已有的生活经验出发，亲自接触最实际的问题，亲身经历发现和解决实际问题的过程，并将实际问题抽象成知识模型，进而借助已经掌握的学科知识技能和能力，对知识模型问题进行解释和解决，将知识技能转化为能力。学习方法方面，让学习者拥有自主权，尝试多种方法如合作学习、独立思考、实验或模拟等多种方法学习，在实践中改造方法。呈现媒体以文字+图+语音为主，呈现内容以网络链接地址（含二维码）为主；知识拓展环节时长控制在30秒左右。
5效果预测
建构主义视角下微课教学表达设计策略的学习效果预测，可从知识和技能、过程与方法、情感态度价值观３个维度对教学目标达成进行评价。
知识与技能维度。建构主义视角下微课教学表达设计策略，能从学习者加工外部信息的角度出发，利用信息技术优势以简洁、直观的动画视频等多媒体形式呈现知识技能，以学习者熟悉与感兴趣的故事方式逐次陈述知识技能，降低获取知识技能的难度。由于学习者在故事化、生活化情景中学习知识技能，成了加工知识的主体，学习过程成为主动认知、主动建构知识技能意义并获得成就感的过程，从而使学习者有积极的情感投入，促进了学习者的学习参与度。同时10min左右的微课，从时间与精力分配上更有利于新知识技能的掌握，因此，学习效果优于一般多媒体教学资源。
过程与方法维度。建构主义视角下微课教学表达设计策略，依据学习者对外来信息加工方式，注重情境学习、学习任务的创设，以层层递进的线性顺序，引导学习者参与故事化、生活化的学习活动，使学习者在自己熟知的情景下跟随故事情节的推进逐次学习，始终能感到自己的责任、义务与目标。因此，学习者在学习过程中的主动性、精力投入方面优于一般多媒体资源。
情感态度价值观维度。建构主义视角下微课教学表达设计策略，营造故事化、生活化的情景，使学习者以主体的身份在接近真实情景中学会与应用所学知识技能，提高了学习者对社会工作生活中运用所学知识解决实际问题的感悟水平，感受真实社会中协作、团结的重要性，有助于形成正确的社会观点、行为方式和目标，故在情感态度价值观方面的培养效果优于一般多媒体教学资源。
参考文献：
[1]孙田琳子，石福新，王子权，等.教育资源的建设、应用与反思[J].中国电化教育，2020(6):130-146．
[2]龚文丽，张亚珍.基于全国高校微课教学比赛获奖作品的调
jquery在线教程学习查研究[J].黑龙江教师发展学院学报，2020，39(7):43-45．[3]黄贤.基于ADDIE模型的动画故事型微课设计与制作[J].软
件导刊 教育技术,2019，18(11):72-74．
[4]陈实，梁家伟，于勇，等.疫情时期在线教学平台、工具及其
应用实效研究[J].中国电化教育，2020(5):44-52．[5]黄葳.新媒体环境下微课视频设计与制作研究[J].黑龙江科
学,2020,11(5):56-57．
[6]陈香琴.混合学习背景下初中信息技术课程微课设计与制
作[J].中小学电教，2020(4):19-20．
[7]姜永生.信息化教学概论[M].北京：中国铁道出版社，2018: 14-19.
[8]苏小兵，管珏琪，钱冬明，等．微课概念辨析及其教学应用研
究[J].中国电化教育，2014(7):94-99.
[9]姜永生.微课教学表达设计之研究[J].广东第二师范学院学
报.2016,36(5):98-102.
[10]郑炜冬.微课情感化设计：理念、内涵、模型与策略[J].中国
电化教育,2014(6):101-106
【通联编辑：王力】
（上接第208页）
以正常运行，但有这些功能可以让访客有更好的体验，所以DOM脚本编程是一项值得深入掌握的技术。
参考文献：
[1]Jeremy Keith,JeffreySambells.JavaScript DOM编程艺术[M].北
京：人民邮电出版社,2014.
[2]JavaScript与jQuery实战教程[M].北京：清华大学出版社, 2015.
[3]www.runoob/js/js-tutorial.html.
[4]www.w3school/js/index.asp.
【通联编辑：王力】

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。