手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js鼠标滑过图片震动特效的方法
js鼠标滑过图片震动特效的方法
摘要:本文实例讲述了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程序设计有所帮助。

【js鼠标滑过图片震动特效的方法】相关文章:

js控制网页前进和后退的方法

JavaScript实现鼠标拖动效果的方法

js兼容火狐获取图片宽和高的方法

jquery实现图片左右切换的方法

js+html5绘制图片到canvas的方法

jQuery预加载图片常用方法

JavaScript实现鼠标滑过处生成气泡的方法

javascript实现树形菜单的方法

Node.js重新刷新session过期时间的方法

js兼容火狐显示上传图片预览效果的方法

精品推荐
分类导航