电子商务网页制作-项目八

1、项目八设计与制作网页的交互特效项目综述 网页特效的制作不是一件很难的事情,只要具备一定的JavaScript基础和CSS样式知识就可以在页面上实现丰富的动态特殊效果。本项目将介绍现今几个比较流行的网页特效制作实例(图片放大制作、广告图片自动轮换制作和浮动广告制作),以提高学习者的网页特效制作能力。项目目标能力目标：学习完本项目后,学生应当能够依据公司项目要求完成页面的特效制作,包括:(1)结合CSS和JavaScript实现广告图片自动轮换特效。(2)利用JavaScript实现浮动广告特效。(2)利用JavaScript实现悬浮客服特效。(2)利用JavaScript实现两侧悬浮促销广告特效

2、。知识目标：(1)JavaScript的嵌入格式及方法。(2)JavaScript代码的编写方法。(3)JavaScript函数的定义及调用。(4)CSS样式在特效中的应用方法。(5)JavaScript在特效中的应用方法。Part 01任务一广告图片自动轮换的制作任务引导 本任务的目标是利用CSS实现个人网站首页的广告图片的自动轮换特效功能。广告图片自动轮换是通过图片的自动切换展示出各种广告图片,如果要浏览某张图片,可以通过点击图片跳转到相应的页面,在这个页面里除了浏览此图片之外还可以浏览其他相关信息,这是一种形象生动的广告形式 。任务实施1. 添加图片2. 添加图片轮换功能知识分析 需要说

3、明的是在实际使用中,JavaScript代码在IE浏览器和其他，例如Firefox浏览器中会存在一些差异。banner轮播动画有时会通过其他不同代码来完成，这也是为了增加其通用性。 1.JavaScript格式 上述图片自动轮换播放特效采用了JavaScript技术, JavaScript使用的是成对的标记:,这种代码可以在网页的之间或者在之间嵌入,格式如下:知识分析 2.JavaScript函数 图片自动轮换播放的JavaScript代码中定义了函数,分别为$(),galleryplay()和loop()。将脚本编写为函数,就可以避免页面载入时执行该脚本。函数包含着一些代码,这些代码只能被事

4、件激活,或者说在函数被调用时才会执行。你可以在页面中的任何位置调用脚本(如果函数嵌在一个外部的.js文件,那么甚至可以从其他的页面中调用)。这里主要说明galleryplay()这个函数,该函数实现了广告图片自动轮换功能。JavaScript中创建函数的语法如下:function 函数名(参数1,参数2,参数n)代码知识分析 3.CSS revealtrans滤镜 使用CSS的revealtrans滤镜可以制作出图片切换时的播放效果,它的书写格式是这样的:Filter:revealtrans(duration=转换的秒数,transition=转换的类型)拓展练习1.什么是脚本语言 脚本语言包

5、含以下几点含义: (1)脚本语言包括JavaScript、VBscript、PHP和PERL等,是一种介于HTML和C、C+、Java、C#等编程语言之间的语言,其同样由程序代码组成。 (2)脚本语言与编程语言有很多相似地方,其函数与编程语言比较相似。与编程语言之间最大的区别是编程语言的语法和规则更为严格和复杂一些。 (3)脚本语言一般都有相应的脚本引擎来解释执行。它们一般需要解释器才能运行。JavaScrip、ASP、PHP、PERL都是脚本语言。C/C+编译、链接后,可形成独立执行的exe文件。 (4)脚本语言一般都以文本形式存在,类似于一种命令。拓展练习2.的作用 的作用是使得不支持Ja

6、vaScript的旧版本浏览器能忽略脚本内容,即是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来,这对不支持Javascript语言的浏览器来说是很有用的。3.JavaScript语句 JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。如“document.write(”Hello world“);”,这个JavaScript语句告诉浏览器向网页输出“Hello world”。通常要在每行语句的结尾加上一个分号,大多数人都认为这是一个好的编程习惯,而且在Web上的JavaScript案例中也常常会看到这种情况。拓展练习4.完成上

7、一项目拓展中的农产品网站4张banner轮播图效果。习题1. JavaScript的格式是怎样的,如何定义并调用JavaScript函数?2.Math对象提供的常用函数有哪些,它们分别实现了什么功能?3.在图片轮换时利用CSS的revealtrans滤镜实现随机溶解的功能。Part 02任务二浮动广告的制作任务引导 本任务的目标是利用CSS实现个人网站首页的浮动广告特效功能。具体要求:广告在页面上按照一定的轨迹浮动,当鼠标移动到浮动广告上时,浮动广告停止运行,便于用户详细点击查看 。任务实施1.添加浮动广告图片2.实现广告的浮动知识分析 Rimifon.NewFloatAd表示JavaScri

8、pt调用了Rimifon对象的一个函数NewFloatAd,该函数用于实现广告图片的浮动,它包括两个参数,第一个是图片路径(images/004.jpg),第二个是图片链接URL。该函数返回了一个对象ad,它是一个链接对象,我们可以在函数NewFloatAd的定义中分析得知。这里设置了超链接图片开始浮动的位置,包括距离顶端(ad.style.top)和距离左边(ad.style.left)的值,同时还设置了超链接图片的大小,包括宽度(ad.Image.width)和高度(ad.Image.height)。 在这些代码中最重要的是图片浮动函数的定义,即函数NewFloatAd。该函数中有几段重要

9、的代码需要分析。document.createElement(),它是在对象中创建一个对象,该函数常常要与appendChild()方法或insertBefore()方法联合使用。其中,appendChild()方法表示在节点的子节点列表末添加新的子节点,而insertBefore()方法表示在节点的子节点的列表任意位置插入新的节点。拓展练习 1.单侧悬浮客服的制作 在访问某网站或者去淘宝网店购物经常会看见右侧联系客服的悬浮图片随着页面的滚动而始终在右侧显示。这不仅增加了页面的美观，而且可以方便客户与企业客服联系。本任务的目标是利用CSS实现个人网站的悬浮客服的特效功能。具体要求:悬浮客服随着页面的滚动始终在页面的右上角显示，并可以进行关闭和查看具体下联系方式。拓展练习 2.两侧促销广告悬