手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js实现鼠标触发图片抖动效果的方法
js实现鼠标触发图片抖动效果的方法
摘要:本文实例讲述了js实现鼠标触发图片抖动效果的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:鼠标触发图片抖动效果.shake...

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

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

<head>

<title>鼠标触发图片抖动效果</title>

<style>

.shakeimage{

position:relative

}

</style>

<script language="JavaScript1.2">

//configure shake degree (where larger # equals greater shake)

var rector=3

///////DONE EDITTING///////////

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>

</head>

<body bgcolor="#F7F7F7">

<p align="center">

<img src=http://www.jb51.netimages/skinslogo.gif onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this)">

<br>

鼠标移动上来看效果!</p>

</body>

</html>

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

【js实现鼠标触发图片抖动效果的方法】相关文章:

jQuery实现将页面上HTML标签换成另外标签的方法

javascript实现Table间隔色以及选择高亮的方法

js+html5实现canvas绘制镂空字体文本的方法

JS实现带缓冲效果打开、关闭、移动一个层的方法

Jquery解析json字符串及json数组的方法

js+html5实现canvas绘制简单矩形的方法

jQuery实现首页图片淡入淡出效果的方法

js实现从右向左缓缓浮出网页浮动层广告的方法

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

javascript实现查找数组中最大值方法汇总

精品推荐
分类导航