实验内容
Download
1 / 11

实验内容 1、利用 JavaScript 制作文字颜色变换特效 2、利用 JavaScript 制作网页背景颜色变换特效 3、利用 JavaScript 制作图片淡入淡出特效 - PowerPoint PPT Presentation


  • 279 Views
  • Uploaded on

实验内容 1、利用 JavaScript 制作文字颜色变换特效 2、利用 JavaScript 制作网页背景颜色变换特效 3、利用 JavaScript 制作图片淡入淡出特效 4、利用 JavaScript 制作文字跟随鼠标特效. 实验目的 1 、理解 JavaScript 语言的交互性和动态性 2 、掌握如何利用 JavaScript 语言制作网页特效. 实验重点 1 、掌握在网页中插入 JavaScript 代码的方法 2 、利用 JavaScript 实现网页动态效果. 实验难点 1 、网页中特殊效果的实现方法.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' 实验内容 1、利用 JavaScript 制作文字颜色变换特效 2、利用 JavaScript 制作网页背景颜色变换特效 3、利用 JavaScript 制作图片淡入淡出特效 ' - inez


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

实验内容

1、利用JavaScript制作文字颜色变换特效

2、利用JavaScript制作网页背景颜色变换特效

3、利用JavaScript制作图片淡入淡出特效

4、利用JavaScript制作文字跟随鼠标特效


实验目的

1、理解JavaScript语言的交互性和动态性

2、掌握如何利用JavaScript语言制作网页特效


实验重点

1、掌握在网页中插入JavaScript代码的方法

2、利用JavaScript实现网页动态效果


实验难点

1、网页中特殊效果的实现方法


实验内容一:用JavaScript制作文字颜色变换特效

步骤1:准备JavaScript代码

步骤2:编辑要实现特效的网页源代码

步骤3:将JavaScript代码插入到网页源代码中的适当位置

步骤4:浏览实现文字颜色变换特效的网页

步骤5:增加文字颜色种类(turquoise,coral,orange,lime,violet)

步骤6:随机显示文字颜色(Math.round(Math.random()*10))

步骤7:增加文字的跑马灯效果


实验内容二:用JavaScript制作网页背景颜色变换特效

步骤1:准备JavaScript代码

步骤2:编辑要实现特效的网页源代码

步骤3:将JavaScript代码插入到网页源代码中的适当位置

步骤4:在<body>标签中加入onload事件

步骤5:浏览实现背景色变换特效的网页

步骤6:控制背景颜色变换速度

步骤7:随机显示背景颜色


实验内容三:用JavaScript制作图片淡入淡出特效

步骤1:准备JavaScript代码

步骤2:编辑要实现特效的网页源代码

步骤3:将JavaScript代码插入到网页源代码中的适当位置

步骤4:在<image>标签中加入alpha滤镜

步骤5:在<body>标签中加入onload事件

步骤6:控制图片透明度直到完全消失

步骤7:当鼠标移动到图片上方时,启动图片淡入淡出特效


实验内容四:用JavaScript制作文字跟随鼠标特效

步骤1:准备JavaScript代码

步骤2:编辑要实现特效的网页源代码

步骤3:将部分JavaScript代码插入到网页<head></head>之间

步骤4:其余部分插入到网页<body></body>之间

步骤5:在<body>标签中加入onload事件

步骤6:控制跟随鼠标的文字大小和颜色

步骤7:控制跟随鼠标的文字间距


思考题:用JavaScript制作彩蛋跟随鼠标特效

提示:

1、可参考文字跟随鼠标特效

2、跟随鼠标的彩蛋可用图片来实现(egg1-3.gif)

3、同学们可分组讨论,发挥团队力量

4、教师对每个小组进行考核,记录实验课考核成绩


实验小结】

通过这次实验课的学习,同学们理解了JavaScript语言的交互性和动态性,掌握了如何利用JavaScript制作网页特效,使我们制作的网页“动”静结合,“变”化莫测。



ad