ISSN1009-3044ComputerKnowledgeand年Technology第17卷第4期(20212月)电脑知识与技术Vol.17,No.4February2021E-mail：*************.cnComputerKnowledgeandTechnology电脑知识与技术http：//：+86-551-6569用JavascriptDOM实现网页幻灯片动画实例吴瑕（四川职业技术学院计算机科学系，四川遂宁629000）摘要：在Web应用成为绝对主流的大背景下，友好的动画交互可以给访客带来更好的浏览体验,因此网站前端开发的重要性也越来越凸显。本文就对网站前端开发的一个经典实例进行介绍：用JavascriptDOM脚本在网站主页实现幻灯片动画。关键词：JavascriptDOM；幻灯片动画中图分类号：G642文献标识码：A开放科学（资源服务）标识码（OSID）：文章编号：1009-3044(2021)04-0207-021引言由于大多数访客都会首先访问网站主页，所以在主页加入一些友好的动画效果让页面更加炫酷，是当前网站前端开发的一种流行趋势。因此网站前端开发技术也是网站开发人员学习和应用的一个重点技术。本文就对教学中实现的一个Javas⁃criptDOM主页幻灯片动画进行详细介绍。这里值得注意以下几点：1）为了让导航中的链接水平排列，需要使用浮动布局。2）首先要为HTML5块元素定义默认样式，即使是那些不支持的浏览器，也能让这些元素都具有适当的块布局。3）使用通配选择器把所有元素的内外边距设置为零以确保不同浏览器有相同显示效果。2设计与实现2.1布局主页先通过编写HTML完成主页内容，再通过CSS定义布局和颜色。主页效果如图1所示，当鼠标经过导航条，导航条下面的图片以幻灯片播放效果快速流畅的切换成对应图片，如图2，当鼠标移动到“Live”，图片切换成对应小图。当鼠标放到“in⁃tro”段落中的链接上时，也会触发同样的幻灯片动画。HTML代码如下：

ComputerKnowledgeandTechnology电脑知识与技术2.2.1insertAfter()函数因为DOM中只提供了在已有元素前插入一个新元素的函数：insertBefore()，所以要实现在已有元素之后插入一个新元素要自己编写functioninsertAfter(newE,targetE){insertAfter()函数。代码如下：varif(ild==targetE)parent=Node;Child(newE);else{}{2.2.2}Before(newE,bling);moveE()}函数这个函数的功能是实现网页元素移动，四个形式参数分别是：被移动对象的ID，移动目标位置left值，移动目标位置top值，调用移动函数的时间间隔。代码如下：functionmoveE(elemID,final_x,final_y,interval)ifif(!mentById)returnfalse;{var(!mentById(elemID))ife=returnfalse;clearTimeout(nt);(nt)mentById(elemID);{if}(!)if="0px";{(!)}varxp="0px";{}varyp=parseInt();ifreturn(xp===parseInt();iftrue;final_x&&yp}==final_y){vardist(xpfinal_x),可以让动画效果更平滑+dist;//让元素每次向右移动它与目的地距离的十{,以下移动亦如此}xp=((xp-final_x)/10);if=xp-dist;}vardist(ypfinal_y)=yp=-((yp{dist;-final_y)/10);=xp}+"px";"+interval+")";varrepeat==yp+"moveE('"+elemID+"',"+final_x+","+final_y+","px";nt=setTimeout(repeat,interval);2.2.3}prepareSlideshow()函数该函数是在网页中的“intro”段落之后创建幻灯片图片元素（）并准备相应的链接，为每一个超链接绑定mo⁃208多媒体技术及其应用第17卷第4期(2021年2月)veE()函数。functionprepareSlideshow()ifif(!mentsByTagName){if(!mentById)returnfalse;returnfalse;var(!mentById("intro"))returnfalse;ribute("id","slideshow");slideshow=mentById("intro");=Element("div");ribute("src","images/");frame=Element("img");ribute("alt","");ribute("id","frame");动画效果放在一个小窗口里Child(frame);//创建圆角边框元素，旨在把ribute("src","images/");preview=Element("img");ribute("alt","ribute("id","preview");glimpseofwhatawaitsyou");Child(preview);将其插入在insertAfter(slideshow,intro);//“intro”段落之后创建幻灯片图片元素preview，档中所有链接，varlinks=让鼠标放在任何一个超链接上，mentsByTagName("a");//都会触发幻灯遍历文片动画forlinks[i].onmouseover(vari=0;i<;var=function()i++){{ifmoveE("preview",0,0,5);//(f("")destination=ribute("href");!=-1){if}设置移动动画时间为5秒值是”moveE("preview",-150,0,5);//(f("")如果鼠标指向链接的!=-1){”，就把preview元素移动到-150px的位置href属性}值是”moveE("preview",-300,0,5);//(f("")(f("")”，就把preview元素移动到如果鼠标指向链接的!=-1){href属性!=-300px的位置}值是”moveE("preview",-450,0,5);//”，就把preview元素移动到如果鼠标指向链接的-1){-450px的位置href(效果如属性图2)if}值是”moveE("preview",-600,0,5);//(f("")”，就把preview元素移动到如果鼠标指向链接的!=-1){-600px的位置href属性}3小结}}}show最后在JS文件末尾加上：e=prepareSlide⁃很动感的主页幻灯片效果。如果想让网站增加交互功能和增，让页面加载完即刻运行prepareSlideshow()函数，便可实现强可用性，还可以利用JavascriptDOM脚步添加网页图片库，增强表格，增强表单等功能，虽然把这些功能拿走，整个站点也可（下转第212页）本栏目责任编辑：唐一东

ComputerKnowledgeandTechnology电脑知识与技术第17卷第4期(2021年2月)社会发展趋势、极大满足学习者的学习需要。学习形式方面，拓展学习强调教育教学的开放性，到社会中去，到生活中去，让学习者从已有的生活经验出发，亲自接触最实际的问题，亲身经历发现和解决实际问题的过程，并将实际问题抽象成知识模型，进而借助已经掌握的学科知识技能和能力，对知识模型问题进行解释和解决，将知识技能转化为能力。学习方法方面，让学习者拥有自主权，尝试多种方法如合作学习、独立思考、实验或模拟等多种方法学习，在实践中改造方法。呈现媒体以文字+图+语音为主，呈现内容以网络链接地址（含二维码）为主；知识拓展环节时长控制在30秒左右。资源。情感态度价值观维度。建构主义视角下微课教学表达设计策略，营造故事化、生活化的情景，使学习者以主体的身份在接近真实情景中学会与应用所学知识技能，提高了学习者对社会工作生活中运用所学知识解决实际问题的感悟水平，感受真实社会中协作、团结的重要性，有助于形成正确的社会观点、行为方式和目标，故在情感态度价值观方面的培养效果优于一般多媒体教学资源。参考文献：[1]孙田琳子,石福新,王子权,等.教育资源的建设、应用与反思[J].中国电化教育，2020(6):130-146．[2]龚文丽，张亚珍.基于全国高校微课教学比赛获奖作品的调查研究[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【通联编辑：王力】5效果预测建构主义视角下微课教学表达设计策略的学习效果预测，可从知识和技能、过程与方法、情感态度价值观３个维度对教学目标达成进行评价。知识与技能维度。建构主义视角下微课教学表达设计策略，能从学习者加工外部信息的角度出发，利用信息技术优势以简洁、直观的动画视频等多媒体形式呈现知识技能，以学习者熟悉与感兴趣的故事方式逐次陈述知识技能，降低获取知识技能的难度。由于学习者在故事化、生活化情景中学习知识技能，成了加工知识的主体，学习过程成为主动认知、主动建构知识技能意义并获得成就感的过程，从而使学习者有积极的情感投入，促进了学习者的学习参与度。同时10min左右的微课，从时间与精力分配上更有利于新知识技能的掌握，因此，学习效果优于一般多媒体教学资源。过程与方法维度。建构主义视角下微课教学表达设计策略，依据学习者对外来信息加工方式，注重情境学习、学习任务的创设，以层层递进的线性顺序，引导学习者参与故事化、生活化的学习活动，使学习者在自己熟知的情景下跟随故事情节的推进逐次学习，始终能感到自己的责任、义务与目标。因此，学习者在学习过程中的主动性、精力投入方面优于一般多媒体（上接第208页）以正常运行，但有这些功能可以让访客有更好的体验，所以DOM脚本编程是一项值得深入掌握的技术。参考文献：[1]JeremyKeith,riptDOM编程艺术[M].北京:人民邮电出版社,2014.[2]JavaScript与jQuery实战教程[M].北京:清华大学出版社,2015.[3]/js/.[4]/js/.【通联编辑：王力】212多媒体技术及其应用本栏目责任编辑：唐一东