js鼠标滑过图片震动特效的方法_Javascript教程-查字典教程网
js鼠标滑过图片震动特效的方法
js鼠标滑过图片震动特效的方法
发布时间:2016-12-30 来源:查字典编辑
摘要:本文实例讲述了js鼠标滑过图片震动特效的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:鼠标滑过图片震动效果.shakeim...

本文实例讲述了js鼠标滑过图片震动特效的方法。分享给大家供大家参考。具体实现方法如下:

复制代码 代码如下:<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>鼠标滑过 图片震动效果</title>

<STYLE>.shakeimage {

POSITION: relative

}

</STYLE>

</head>

<body>

<SCRIPT language=JavaScript1.2>

<!--

var rector=3

var stopit=0

var a=1

function init(which){

stopit=0

shake=which

shake.style.left=0

shake.style.top=0

}

function rattleimage(){

if ((!document.all&&!document.getElementById)||stopit==1)

return

if (a==1){

shake.style.top=parseInt(shake.style.top)+rector

}

else if (a==2){

shake.style.left=parseInt(shake.style.left)+rector

}

else if (a==3){

shake.style.top=parseInt(shake.style.top)-rector

}

else{

shake.style.left=parseInt(shake.style.left)-rector

}

if (a<4)

a++

else

a=1

setTimeout("rattleimage()",50)

}

function stoprattle(which){

stopit=1

which.style.left=0

which.style.top=0

}

//-->

</SCRIPT>

<img onMouseOver="init(this);rattleimage()" onMouseOut="stoprattle(this)" src="http://www.jb51.netimages/csrcode.ico" border="0"/>

<img onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this)" src="http://www.jb51.netimages/changshi.ico" border="0"/>

<img onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this)" src="http://www.jb51.netimages/links.ico" border="0"/>

鼠标滑过图片预览效果。

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类