js实现鼠标触发图片抖动效果的方法

更新时间：2015年02月27日 09:28:30 作者：代码家园

这篇文章主要介绍了js实现鼠标触发图片抖动效果的方法,通过定时器定时递归调用rattleimage函数实现抖动效果,非常实用,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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=/images/skinslogo.gif class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this)">

<br>

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

</body>

</html>

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

您可能感兴趣的文章:

Bootstrap创建可折叠的组件
这篇文章主要为大家详细介绍了Bootstrap创建可折叠组件的对应方法，以实例为大家分享了Bootstrap折叠组件，感兴趣的小伙伴们可以参考一下
2016-02-02
js module大战
这篇文章主要介绍了js module，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
如何实现js拖拽效果及原理解析
这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
js左侧多级菜单动态的解决方案
实现的效果很简单，就是点一下显示，再点一下就隐藏，只不过是多了几级的问题。好，现在来说说我的设计思路，首先从第一级别开始，添加如下代码
2010-02-02
bootstrap手风琴折叠示例代码分享
这篇文章主要为大家详细介绍了bootstrap手风琴折叠示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
javascript smipleChart 简单图标类
支持线性图区域图柱状图饼图支持多浏览器用到的是svg vml 之后加上多层饼图分段图和组合图
2011-01-01
js 数字、字符串、布尔值的转换方法(必看)
下面小编就为大家带来一篇js 数字、字符串、布尔值的转换方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
js清空form表单中的内容示例
这篇文章主要介绍了js如何清空form表单中的内容，下面有个不错的示例，大家可以参考下
2014-05-05
JavaScript数据库TaffyDB用法实例分析
这篇文章主要介绍了JavaScript数据库TaffyDB用法,实例分析了TaffyDB数据库的定义、查询、更新、删除等操作的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
js下通过prototype扩展实现indexOf的代码
这里使用js prototype扩展实现的indexOf的实现代码，跟js自带的方法，差不多。
2010-12-12