特效制作高级实例练习.ppt

按钮动画 利用两个不同的事件来驱动两个相应的函数，来切换两张对应的图片以创造出动画效果。 使用 JavaScript 创建动态图像是可行的。 窍门是：使用 JavaScript 通过不同的事件来切换不同的图像。 在下面的例子中，我们要制作一个充当链接按钮的图像。我们将使用 onMouseOver 事件和 onMouseOut 事件来驱动 JavaScript 函数切换图像。 a href= target=_blank img border=0 alt=Visit W3School! src=/i/eg_mouse2.jpg name=b1 onmouseOver=mouseOver() onmouseOut=mouseOut() / /a 我们已为图像添加了 name 属性，这样 JavaScript 就能找到它了。 onMouseOver 事件的作用是告知浏览器：一旦鼠标悬浮于图像之上，浏览器就会执行某个函数，这个函数会把这副图像替换为另一幅。 onMouseOut 事件的作用是告知浏览器：一旦鼠标离开图像，浏览器就要执行另一个函数，这个函数会重新插入原来的那幅图像。 通过下面的代码来切换图像： script type=text/javascript function mouseOver() { document.b1.src =/i/eg_mouse.jpg } function mouseOut() { document.b1.src =/i/eg_mouse2.jpg } /script 函数 mouseOver() 将图像切换为 eg_mouse.jpg。 函数 mouseOut() 将图像切换为 eg_mouse2.jpg。 见dh.html 图像地图指的是带有可点击区域的图像。 实例 简单的 HTML 图像映射 本例演示一幅没有添加 JavaScript 的图像映射。 添加了 JavaScript 的图像映射 本例演示一幅添加了 JavaScript 的图像映射，当鼠标浮动于某个热点上时，会调用 JavaScript 函数来显示热点所对应的星球的简介。 我们已经从 HTML 教程中了解到，图像地图是带有可点击区域的图像。通常情况下，每个区域是一个相关的超级链接。单击某个区域，就回到达相关的链接。 下面的例子演示如何创建带有可点击区域的 html 图像地图： img src =planets.gif width =145 height =126 alt=Planetsusemap =#planetmap / map id =planetmap name=planetmap area shape =rect coords =0,0,82,126 href =sun.htm target =_blank alt=Sun / area shape =circle coords =90,58,3 href =mercur.htm target =_blank alt=Mercury / area shape =circle coords =124,58,8 href =venus.htm target =_blank alt=Venus / /map 结果 我们可向图像地图内部的 area 标签添加（能调用JavaScript的）事件。area 标签支持以下事件：onClick、onDblClick、onMouseDown、onMouseUp、onMouseOver、onMouseMove、onMouseOut、onKeyPress、onKeyDown、onKeyUp、onFocus和onBlur。 这是添加了 JavaScript 的上面的例子： 通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。 简单的计时 单击本例中的按钮后，会在 5 秒后弹出一个警告框。 另一个简单的计时 本例中的程序会执行 2 秒、4 秒和 6 秒的计时。 在一个无穷循环中的计时事件 在本例中，单击开始计时按钮后，程序开始从 0 以秒计时。 带有停止按钮的无穷循环中的计时事件 在本例中，点击计数按钮后根据用户输入的数值开始倒计时，点击停止按钮停止计时。 使用计时事件制作的钟表 一个 JavaScript 小时钟 通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。 在 JavaScritp 中使用计时事件是很容易的，两个关键方法是: setTimeout() 未来的某时执行代码 clearTimeout() 取消setTimeout()