《电子商务网页设计与制作》课件第九章

第九章制作网页交互特效网页特效是网页中非常有魅力的部分,设计任何一个网站都少不了网页特效的制作,它是网页制作的一个重要组成部分。网页特效的制作不是一件很难的事情,只要具备一定的JavaScript基础和CSS样式知识就可以在页面上实现丰富的动态特殊效果。本章将介绍现今几个比较流行的网页特效制作实例(图片放大制作、广告图片自动轮换制作和浮动广告制作),以提高学习者的网页特效制作能力。知识目标(1)掌握JavaScript的嵌入格式及方法。(2)掌握JavaScript代码的编写方法。(3)了解JavaScript函数的定义及调用。(4)了解CSS样式在特效中的应用方法。(5)了解JavaScript在特效中的应用方法。学习完本章后,学生应当能够依据公司要求完成页面的特效制作,包括:(1)结合CSS和JavaScript实现广告图片自动轮换特效。(2)利用JavaScript实现浮动广告特效。(3)利用JavaScript实现悬浮客服特效。(4)利用JavaScript实现两侧悬浮促销广告特效。第一节广告图片自动轮换的制作本节的目标是利用CSS实现个人网站首页的广告图片的自动轮换特效功能。广告图片自动轮换通过图片的自动切换来展示各种广告图片,如果要浏览某张图片,可以通过点击图片跳转到相应的页面,在这个页面里除了浏览此图片之外还可以浏览其他相关信息,这是一种形象生动的广告形式,制作效果如图9-1所示。一、添加图片

首先在Default.css中注释掉banner块的背景颜色,并在images文件夹下存入图9-2所示的4个用于广告轮换播放的图片。二、添加图片轮换功能

如图9-3所示,4张图片都已全部显示在了页面上,但还没有实现动态自动轮换的功能。为了实现自动轮换,我们需要为它们添加脚本语言,即经常用到的JavaScript语言。在前面添加的图片代码下面加入以下代码:<script

language=″javascript″>Function$(_sld)(//根据对象id获取对象的函数实现return

document.getElementByld(_sld);)var

speed=6000;//播放的速度,单位毫秒var

setid=null;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;

i<ids.length;i++){$

(ids[i]).style.display='none';

//让图片标记为start的图片显示$

(ids[start]).filters.revealTrans.Transition=

Math.floor(Math.random(

)*23);

$

(ids[start]).filters.reveaITrans.apply(

);

$

(ids[start]).filters.reveaITrans.play(

);

$

(ids[start]).style.display=

'none';

setid=setTimeout(loop,speed);

start++;

if(start=

=ids.length){start=0;

}

};loop(

);}}galleryplay('1,2,3,4',1,6000);//调用自动播放函数</script>第二节浮动广告的制作

浮动广告是当前网上最热门的广告特效之一,给人耳目一新的感觉,其主要用于一些最新广告的宣传,可使网页时尚漂亮,并可以体现及时性。本节的目标是利用CSS实现个人网站联系客服的浮动广告特效功能。具体要求:广告在页面上按照一定的轨迹浮动,当鼠标移动到浮动广告上时,浮动广告停止运行,便于用户详细点击查看,制作效果如图9-4所示。一、添加浮动广告图片二、实现广告的浮动在index.html的head标签中加入以下JavaScript代码:<script

type=

″

text/javascript″>var

Rimifon=

{″Ads″:new

Object,″

NewFloatAd″:function(imgUrl,strLink)

{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.Ads[ad.Seed]=ad;ad.

Image.Parent=ad;ad.

style.position=

″absolute″;ad.

style.

left=0;ad.

style.top=0;ad.

Image.src=imgUrl;ad.

Image.onmouseover=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.Ads[floatld];if(

ad.AutoMove){var

curLeft=

parselnt(

ad.style.left);var

curTop=

parselnt(ad.style.top);if(ad.offsetWidth+curLeft>document.body.clientWidth+document.body.scroIILeft-1)

{curLeft=document.body.scroIILeft+document.body.clientWidth-ad.offsetWidth;ad.DirH=

false;}if(ad.offsetHeight+curTop>document.body.clientHeight+document.body,scrollTop-1)

{curTop=

document.body.scrollTop+document.body.clientHeight-ad.offsetHeight;ad.DirV=false;}if(

curLeft<document,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.style.top=curTop+(ad.DirV?1:

-1)+″

px″;}}}</script>然后在</body>前面添加以下JavaScript代码:<script

type=″text/javascript″>var

ad=Rimifon

.NewFloatAd(″images/004.jpg″);ad.style.left=

500;ad.style.top=456;ad.Image.width=160;ad.Image.height=210;</script>第三节悬浮客服的制作

我们在访问某些网站时经常会看见右侧联系客服的悬浮图片随着页面的滚动而始终在右侧显示。这不仅增加了页面的美观,而且方便了客户与企业客服联系。本节的目标是利用CSS实现个人网站的悬浮客服特效功能。具体要求:悬浮客服随着页面的滚动始终在页面的右上角显示,并可以关闭或查看具体联系方式,制作效果如图9-7所示。一、添加悬浮客服图片将图9-8所示图片存放到images文件夹下面。二、实现广告的浮动在index.html的head标签中加入以下JavaScript代码:<script

type=″text/javascript″>

lastScroIIY=0;function

heartBeat(

){var

diffY;if

(document.documentElement&&

document.documentElement.scrollTop)diffY=

document.documentElement.scrollTop;else

if

(document.body)diffY=

document.body.scrollTop;else(/*

Netscape

stuff*/)//alert(diffY);percent=.1*(diffY-lastScrollY);if(percent>

0)

percent=

Math.ceil(percent);else

percent=

Math.floor(

percent);

document.getElementByld(″rightDiv″).style.top=parselnt(document.getElementByld(″rightDiv″).style.top)

+percent+″

px″;lastScrollY=lastScrollY+percent;//alert(lastScrollY);}//下面这段删除后,对联将不跟随屏幕移动。window.setlnterval(″heartBeat(

)″,1);//-->//关闭按钮function

close_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='none';}//显示样式document.writeln(″<style

type=\″

text\/css\″>″);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(″<\lstyle>″);//以下为主要内容document.writeln(″<\/div>″);document.writeln(″<div

id=\″

rightDiv\″style=\″top:40px;

right:5px\″>″);//------右侧各块结束//---R1document.writeln(″<div

id=\″

rightl\″class=\″

itemFloat\″>″);document

.writeln(″<a

href='#'><img

src='images\\004.jpg.'width=160

height=210/></a>″);document.writeln(″<br><a

href=\″javascript:close_rightl(

);\″