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 相关文章推荐
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
js精度溢出解决方案
Dec 02 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 Javascript
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
php htmlspecialchars加强版
2010/02/16 PHP
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
JavaScript 乱码问题
2009/08/06 Javascript
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python写入数据到MP3文件中的方法
2015/07/10 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
法学专业个人求职信
2013/09/26 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android