1、第九章制作网页交互特效网页特效是网页中非常有魅力的部分,设计任何一个网站都少不了网页特效的制作,它是网页制作的一个重要组成部分。网页特效的制作不是一件很难的事情,只要具备一定的JavaScript基础和CSS样式知识就可以在页面上实现丰富的动态特殊效果。本章将介绍现今几个比较流行的网页特效制作实例(图片放大制作、广告图片自动轮换制作和浮动广告制作),以提高学习者的网页特效制作能力。知识目标(1)掌握JavaScript的嵌入格式及方法。(2)掌握JavaScript代码的编写方法。(3)了解JavaScript函数的定义及调用。(4)了解CSS样式在特效中的应用方法。(5)了解JavaScri
2、pt在特效中的应用方法。学习完本章后,学生应当能够依据公司要求完成页面的特效制作,包括:(1)结合CSS和JavaScript实现广告图片自动轮换特效。(2)利用JavaScript实现浮动广告特效。(3)利用JavaScript实现悬浮客服特效。(4)利用JavaScript实现两侧悬浮促销广告特效。第一节广告图片自动轮换的制作本节的目标是利用CSS实现个人网站首页的广告图片的自动轮换特效功能。广告图片自动轮换通过图片的自动切换来展示各种广告图片,如果要浏览某张图片,可以通过点击图片跳转到相应的页面,在这个页面里除了浏览此图片之外还可以浏览其他相关信息,这是一种形象生动的广告形式,制作效果如
3、图9-1所示。一、添加图片 首先在Default.css中注释掉banner块的背景颜色,并在images文件夹下存入图9-2所示的4个用于广告轮换播放的图片。二、添加图片轮换功能 如图9-3所示,4张图片都已全部显示在了页面上,但还没有实现动态自动轮换的功能。为了实现自动轮换,我们需要为它们添加脚本语言,即经常用到的JavaScript语言。在前面添加的图片代码下面加入以下代码:Function$(_sld)(/根据对象id获取对象的函数实现return document.getElementByld(_sld);)var speed=6000;/播放的速度,单位毫秒var setid=nu
4、ll;var auto=true;/自动播放标志function galleryplay(divs,a,mtime)/自动播放函数实现,divs表示播放的图片列表,/a表示自动播放默认开始图片,mtime表示播放的速度if(divs=0)return false;var start=3;if(auto=true)start=a-1;/图片播放开始标记speed=mtime;setid=null;var loop=function()ids=divs.split(,);/所有图片都不显示for(var i=0;iids.length;i+)$(idsi).style.display=none;/
5、让图片标记为start的图片显示$(idsstart).filters.revealTrans.Transition=Math.floor(Math.random()*23);$(idsstart).filters.reveaITrans.apply();$(idsstart).filters.reveaITrans.play();$(idsstart).style.display=none;setid=setTimeout(loop,speed);start+;if(start=ids.length)start=0;loop();galleryplay(1,2,3,4,1,6000);/调用
6、自动播放函数第二节浮动广告的制作 浮动广告是当前网上最热门的广告特效之一,给人耳目一新的感觉,其主要用于一些最新广告的宣传,可使网页时尚漂亮,并可以体现及时性。本节的目标是利用CSS实现个人网站联系客服的浮动广告特效功能。具体要求:广告在页面上按照一定的轨迹浮动,当鼠标移动到浮动广告上时,浮动广告停止运行,便于用户详细点击查看,制作效果如图9-4所示。一、添加浮动广告图片二、实现广告的浮动二、实现广告的浮动在 index.html的head标签中加入以下 JavaScript代码:var Rimifon=Ads:new Object,NewFloatAd:function(imgUrl,str
7、Link)var ad=document.createElement(a);ad.DirV=true;ad.DirH=true;ad.AutoMove=true;ad.Image=new Image();ad.Seed=Math.random();ad.Timer=setlnterval(Rimifon.Float(+ad.Seed+),50);this.Adsad.Seed=ad;ad.Image.Parent=ad;ad.style.position=absolute;ad.style.left=0;ad.style.top=0;ad.Image.src=imgUrl;ad.Image.o
8、nmouseover=function()this.Parent.AutoMove=false;ad.Image.onmouseout=function()this.Parent.AutoMove=true;if(strLink)ad.href=strLink;ad.Image.border=0;ad.target=_blank;ad.appendChild(ad.Image);document.body.appendGhild(ad);return ad;Float:function(floatld)var ad=this.Adsfloatld;if(ad.AutoMove)var curL
9、eft=parselnt(ad.style.left);var curTop=parselnt(ad.style.top);if(ad.offsetWidth+curLeftdocument.body.clientWidth+document.body.scroIILeft-1)curLeft=document.body.scroIILeft+document.body.clientWidth-ad.offsetWidth;ad.DirH=false;if(ad.offsetHeight+curTopdocument.body.clientHeight+document.body,scroll
10、Top-1)curTop=document.body.scrollTop+document.body.clientHeight-ad.offsetHeight;ad.DirV=false;if(curLeftdocument,body.scroIILeft)curLeft=document.body.scroIILeft;ad.DirH=true;if(curTop document.body.scrollTop)curTop=document.body.scrollTop;ad.DirV=true;ad.style.left=curLeft+(ad.DirH?1:-1)+px;ad.styl
11、e.top=curTop+(ad.DirV?1:-1)+px;然后在前面添加以下JavaScript代码:var ad=Rimifon.NewFloatAd(images/004.jpg);ad.style.left=500;ad.style.top=456;ad.Image.width=160;ad.Image.height=210;第三节悬浮客服的制作 我们在访问某些网站时经常会看见右侧联系客服的悬浮图片随着页面的滚动而始终在右侧显示。这不仅增加了页面的美观,而且方便了客户与企业客服联系。本节的目标是利用CSS实现个人网站的悬浮客服特效功能。具体要求:悬浮客服随着页面的滚动始终在页面的右上
12、角显示,并可以关闭或查看具体联系方式,制作效果如图9-7所示。一、添加悬浮客服图片一、添加悬浮客服图片将图9-8所示图片存放到images文件夹下面。二、实现广告的浮动二、实现广告的浮动在index.html的head标签中加入以下JavaScript代码:lastScroIIY=0;function heartBeat()var diffY;if(document.documentElement&document.documentElement.scrollTop)diffY=document.documentElement.scrollTop;else if(document.body)d
13、iffY=document.body.scrollTop;else(/*Netscape stuff*/)/alert(diffY);percent=.1*(diffY-lastScrollY);if(percent0)percent=Math.ceil(percent);else percent=Math.floor(percent);document.getElementByld(rightDiv).style.top=parselnt(document.getElementByld(rightDiv).style.top)+percent+px;lastScrollY=lastScrol
14、lY+percent;/alert(lastScrollY);/下面这段删除后,对联将不跟随屏幕移动。window.setlnterval(heartBeat(),1);/-/关闭按钮functionclose_leftl()/leftl.style.visibility=hidderi;leftl.style.display=none;leftDiv.style.display=none;function close_rightl()/rightl.style.visibility=hidden;rightl.style.display=none;rightDiv.style.display
15、=none;/显示样式document.writeln();document.writeln(#leftDiv,#rightDiv width:270px;height:150px;background-color:#fff;position:absolute;);document.writeln(.itemFloat width:100px;height:auto;line-height:5px);document.writeln();/以下为主要内容document.writeln();document.writeln();/-右侧各块结束/-R1document.writeln();do
16、cument.writeln();document.writeln(brbr);document.writeln();/-右侧各块结束document.writeln();当需要更换图片时,只需修改代码document.writeln(imgsrc=images004.jpgwidth=160 height=210/)中的img src,将图片的相对地址填入这里即可,width和height分别表示该图片的宽度和高度。当需要修改漂浮图片距离网页两侧的距离时,可以修改代码document.writeln(#leftDiv,#rightDivwidth:270px;height:150px;background-color:#fff;position:absolute;)中的width完成。1.JavaScript的格式是怎样的?如何定义并调用JavaScript函数?2.Math对象提供的常用函数有哪些?它们分别实现了什么功能?3.在图片轮换时利用CSS的revealtrans滤镜实现随机溶解的功能。4.简述createElement()、appendChild()和insertBefore()三个函数的作用。5.如何获取当前页面滚动条的纵坐标位置?
