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 相关文章推荐
jquery之Document元素选择器篇
Aug 14 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 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 信息采集程序代码
2009/03/17 PHP
php统计文章排行示例
2014/03/04 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
PHP创建XML接口示例
2019/07/04 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
Javascript基础教程之for循环
2015/01/18 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
Vue实现push数组并删除的例子
2019/11/01 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
建筑设计学生的自我评价
2014/01/16 职场文书
销售竞赛活动方案
2014/08/23 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
停车场管理协议书范本
2014/10/08 职场文书
给客户的感谢信
2015/01/21 职场文书
出国留学单位推荐信
2015/03/26 职场文书
2016年少先队活动总结
2016/04/06 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python