郑州网站建设业务咨询热线：
0371-65349913 / 15333818157
0371-65349913 / 15333818157
本网页展示了利用javascript技术利用JS技术实现鼠标滑过图片时震动的效果，也许各位在日常的网站建设中可能能够用到，尤其是在实现一些特效的时候。本例中有几个参数需要说明一下：rector表示震动幅度，值越大震动幅度越大，您可以修改此值来控制图片震动的幅度； stopit用于控制震动状态，值为0表示可以震动了，而在震动状态中如果值改变为1，则停止震动。下面，郑州网站建设公司的小编整理了此功能，本代码已经在IE下测试通过，可供建站用户和网站建设技术人员参考。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>利用JS技术实现鼠标滑过图片时震动的效果</title>
<STYLE type="text/css">
.showimage {POSITION: relative;
}
</STYLE>
<SCRIPT language="javascript">
<!--
var rector=3 //震动幅度
var stopit=0 //是否停止震动,0--震动,1--停止
var image; //图片对象
var loop=1; //循环控制变量
//初始化可用变量
function init(img)
{
stopit=0
image=img;
image.style.left=0
image.style.top=0
}
//实现震动图片
function zhendong_image()
{
if ((!document.all&&!document.getElementById)||stopit==1)
return;
if (loop==1){
image.style.top=parseInt(image.style.top)+rector
}
else if (loop==2){
image.style.left=parseInt(image.style.left)+rector
}
else if (loop==3){
image.style.top=parseInt(image.style.top)-rector
}
else{
image.style.left=parseInt(image.style.left)-rector
}
if (loop<4)
loop++;
else
loop=1;
setTimeout("zhendong_image()",50)
}
//鼠标离开时执行该函数功能，恢复初始值
function stop(image)
{
stopit=1; //停止震动
image.style.left=0; //恢复初始值
image.style.top=0; //恢复初始值
}
//-->
</SCRIPT>
</head>
<body>
<img class="showimage" onMouseOver="init(this); zhendong_image();" onMouseOut="stop(this)" src="http://www.kxcom.net/images/logo.jpg" border="0" style="cursor:pointer;" />
</body>
</html>