版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
第九章制作网页交互特效网页特效是网页中非常有魅力的部分,设计任何一个网站都少不了网页特效的制作,它是网页制作的一个重要组成部分。网页特效的制作不是一件很难的事情,只要具备一定的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(
);\″
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 道路安全学习心得体会
- 护理人员职业道德培训
- 油库应急处理流程
- 初中历史教案反思
- 布艺扎染教案反思
- 白露主题班会教案
- 和的认识说课稿
- 文化创意承销协议书范本
- 水利工程机械施工合同
- 土建项目协议书范本
- 南京大学新闻传播硕士专业学位研究生
- 贵州省普通话考试说话题目30篇经典范文
- 学校满意度调查表学生版
- 最新RBT214-2017检验检测机构资质认定全套体系文件汇编(质量手册+程序文件)
- DB11-T 1580-2018 生产经营单位安全生产应急资源调查规范
- 《水产动物营养与饲料学》课件第6课-能量营养
- 框架剪力墙工程施工方案设计
- DB37∕2375-2013 山东省工业炉窑大气污染物排放标准
- 班主任先进工作经验交流分享班主任工作经验交流稿
- 第四章离心铸造
- 朗读技巧—停连、重音、语气(课堂PPT)
评论
0/150
提交评论