手机
当前位置:查字典教程网 >编程开发 >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实现鼠标触发图片抖动效果的方法】相关文章:

js实现仿Windows风格选项卡和按钮效果

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

js实现精美的图片跟随鼠标效果实例

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

javascript实现模拟时钟的方法

js实现键盘Enter键提交表单的方法

jquery预加载图片的方法

Javascript实现div层渐隐效果的方法

js实现鼠标划过给div加透明度的方法

js+html5实现canvas绘制圆形图案的方法

精品推荐
分类导航