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中的排序算法代码
Feb 22 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
JS表的模拟方法
Feb 05 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
vue-rx的初步使用教程
Sep 21 Javascript
微信小程序实现留言板
Oct 31 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 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的面试题集
2006/11/19 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
Python字符串格式化
2015/06/15 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
党支部书记先进事迹
2014/01/17 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
A22国内电台短波广播频率表
2022/05/10 无线电
Android实现图片九宫格
2022/06/28 Java/Android
GPU服务器的多用户配置方法
2022/07/07 Servers
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang