实验项目十九　用 javascript制作网页特效.doc

实验项目十九主要聚焦于使用JavaScript来制作四种不同的网页特效，包括文字颜色变换、网页背景颜色变换、图片淡入淡出以及文字跟随鼠标。这些特效的实现基于JavaScript语言的交互性和动态性，使得网页内容更加生动和吸引用户。 1. **文字颜色变换特效**：需要编写JavaScript代码，定义一个数组包含要变换的颜色（如turquoise, coral, orange, lime, violet等）。然后，通过`Math.random()`函数生成一个随机数，结合`Math.round()`函数选取数组中的颜色，并应用到网页的文字上。此外，可以添加跑马灯效果，让文字不断滚动，增强视觉效果。实现代码中，`initArray`函数用于初始化颜色数组，`chcolor`函数负责改变文字颜色，而`setInterval`函数则定时调用`chcolor`，实现每秒更换一次颜色。 2. **网页背景颜色变换特效**：类似文字颜色变换，可以创建一个包含不同背景色的数组，然后通过JavaScript动态改变body或特定元素的背景色。同样，可以设置定时器来周期性地切换背景。 3. **图片淡入淡出特效**：这个特效涉及到CSS的透明度控制和JavaScript的定时器。可以创建两个相同图片元素，一个透明，一个不透明，通过调整它们的透明度（opacity）实现交替显示，达到淡入淡出效果。`setTimeout`或`setInterval`可以控制图片切换的时间间隔。 4. **文字跟随鼠标特效**：需要获取鼠标的位置信息，然后更新文字的位置，使其始终跟随鼠标。JavaScript的`onmousemove`事件可以监听鼠标的移动，`event.clientX`和`event.clientY`获取鼠标坐标，再通过CSS改变文字的`left`和`top`属性。 实验过程中，教师会演示每个特效的实现步骤，学生则需按照指导动手实践，并解决教师布置的思考题，如增加颜色种类、改变动画速度、优化效果等。这种“讲、学、练”结合的方式有助于学生深入理解和掌握JavaScript在网页特效中的应用。 实验设备主要包括计算机和投影机，目的是让学生理解JavaScript的交互性和动态性，并掌握在HTML中插入JavaScript代码以及实现动态效果的方法。实验重点是学习JavaScript代码的插入和动态效果的实现，难点在于如何创新和优化这些特效，以满足不同网页设计需求。通过项目工程互动式教学法，学生能够在实践中提升技能，更好地掌握网页特效的制作。