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


Posted in Javascript onFebruary 27, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
Javascript实现的分页函数
Dec 22 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
浅谈JavaScript字符集
May 22 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
javascript实现当前页导航激活的方法
Feb 27 #Javascript
jquery 根据name名获取元素的value值
Feb 27 #Javascript
jQuery使用元素属性attr赋值详解
Feb 27 #Javascript
jquery实现公告翻滚效果
Feb 27 #Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 #Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 #Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 #Javascript
You might like
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
php4的session功能评述(三)
2006/10/09 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
在Django的视图中使用数据库查询的方法
2015/07/16 Python
全面分析Python的优点和缺点
2018/02/07 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
Django csrf 验证问题的实现
2018/10/09 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
Python同时处理多个异常的方法
2020/07/28 Python
Python学习之time模块的基本使用
2021/01/17 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
Tostadora意大利:定制T恤
2019/04/08 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
办公室日常管理制度
2015/08/04 职场文书
党员读书活动心得体会
2016/01/14 职场文书
详解jQuery的核心函数和事件处理
2022/02/18 jQuery
springboot读取nacos配置文件
2022/05/20 Java/Android