第十九节使用JS制作网页特效.ppt

实验内容 １、利用JavaScript制作文字颜色变换特效 ２、利用JavaScript制作网页背景颜色变换特效 ３、利用JavaScript制作图片淡入淡出特效 ４、利用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制作网页特效，使我们制作的网页“动”静结合，“变”化莫测。 ;谢 谢 ！