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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
学习ExtJS 访问容器对象
Oct 07 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
在JavaScript中监听IME键盘输入事件
May 29 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 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之字符串变相相减的代码
2007/03/19 PHP
php 调用远程url的六种方法小结
2009/11/02 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
javascript天然的迭代器
2010/10/29 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
webpack3之loader全解析
2017/10/26 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
python实现矩阵乘法的方法
2015/06/28 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
python用for循环求和的方法总结
2019/07/08 Python
python装饰器练习题及答案
2019/11/01 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
Python collections模块的使用方法
2020/10/09 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
a标签下载链接的简单实现
2016/09/13 HTML / CSS
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
自荐信如何“自荐”
2013/10/24 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
员工团队活动方案
2014/08/28 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
个性发展自我评价2015
2015/03/09 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python
Python天气语音播报小助手
2021/09/25 Python