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>
<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程序设计有所帮助。
相关文章
在本篇文章里小编给大家分享了关于js删除数组中某一项或几项的几种方法内容，有需要的朋友们学习下。2019-01-01
js 实现图片预加载(js操作 Image对象属性complete ，事件onload 异步加载图片)
通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入，我谈谈对Image对象的一些认识。2011-03-03
本文主要介绍了Svelte框架实现表格协同文档的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要介绍了如何解决html按钮切换绑定不同函数后点击时执行多次函数问题,需要的朋友可以参考下2014-05-05
这篇文章主要为大家详细介绍了原生JS实现拖拽照片墙，实现照片互换位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
在IE浏览器中添加或删除事件用attachEvent、detachEvent，下面的对事件的添加和删除做了封装，感兴趣的朋友可以参考下2014-07-07
变量在if条件中到底是true还是false，还是比较让人迷糊，下面来进行测试，测试常见的变量类型在if条件中的表现2014-07-07
这篇文章主要介绍了JavaScript 防篡改对象的用法示例，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以参考下2021-04-04
这篇文章主要为大家详细介绍了js实现放大镜效果的思路与代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
bootstrap daterangepicker双日历时间段选择控件详解
这篇文章主要为大家详细介绍了bootstrap daterangepicker双日历时间段选择控件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
最新评论