实验内容
This presentation is the property of its rightful owner.
Sponsored Links
1 / 11

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


  • 177 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

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

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


Javascript javascript javascript

实验内容

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

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

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

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


Javascript javascript javascript

实验目的

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

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


Javascript javascript javascript

实验重点

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

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


Javascript javascript javascript

实验难点

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


Javascript javascript javascript

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

步骤1:准备JavaScript代码

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

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

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

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

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

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


Javascript javascript javascript

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

步骤1:准备JavaScript代码

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

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

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

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

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

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


Javascript javascript javascript

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

步骤1:准备JavaScript代码

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

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

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

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

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

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


Javascript javascript javascript

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

步骤1:准备JavaScript代码

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

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

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

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

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

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


Javascript javascript javascript

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

提示:

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

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

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

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


Javascript javascript javascript

【实验小结】

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


Javascript javascript javascript

谢 谢 !


  • Login