本文实例讲述了js鼠标滑过图片震动特效的方法。分享给大家供大家参考。具体实现方法如下：
代码如下:<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>鼠标滑过 图片震动效果</title>
<STYLE>.shakeimage {
POSITION: relative
}
</STYLE>
</head>
<body>
[removed]
<!–
var rector=3
var stopit=0
var a=1
fun
在JavaScript编程中，有时我们可能需要为网页添加一些动态效果以增强用户体验，比如鼠标滑过图片时产生震动特效。这个实例就是关于如何使用JavaScript实现这一功能的详细讲解。
我们要明白实现这种特效的关键在于改变图片的位置。在这个例子中，CSS被用来设置图片的相对定位（POSITION: relative），这样我们可以通过JavaScript动态调整其left和top属性来实现震动效果。
代码中定义了两个全局变量：
1. `rector`：表示每次移动的距离，这里设置为3像素。
2. `stopit`：用于控制是否停止震动，初始值设为0，表示未停止。
另外，定义了两个函数：
1. `init(which)`：当鼠标滑过图片时被调用，初始化图片的位置（left和top设为0），并传入当前图片元素作为参数。
2. `rattleimage()`：执行震动效果的函数。根据变量`a`的值，分别改变图片的left或top属性，使得图片在四个方向上交替移动。当`a`值达到4时重置回1，然后设置定时器（setTimeout）50毫秒后再次调用此函数，形成连续震动的循环。
使用HTML的onMouseOver和onMouseOut事件绑定到图片元素上。当鼠标移入图片时，调用`init(this)`和`rattleimage()`；移出时，调用`stoprattle(this)`停止震动，并将图片位置恢复。
整个代码结构清晰，通过JavaScript与CSS的结合，实现了鼠标滑过图片时的震动效果。这种技术可以广泛应用于各种交互式网页设计，为用户提供更生动、有趣的体验。
值得注意的是，代码中使用的`<SCRIPT>`标签内嵌了JavaScript代码，这是老式的写法，现代的JavaScript代码通常会放在外部文件中并通过`<script src="..."></script>`引入，以保持代码的整洁和便于维护。此外，为了兼容更多浏览器，可以考虑使用`addEventListener`和`removeEventListener`替代传统的事件处理函数。
这个实例展示了JavaScript在网页动态效果中的应用，帮助开发者了解如何利用JavaScript控制DOM元素的属性来创建动态视觉效果。学习和理解这一方法，对于提升JavaScript编程能力和网页设计技巧都有很大帮助。
