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 可拖动列表实现代码
Dec 13 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 Javascript
JavaScript实现音乐导航效果
Nov 19 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者的疑难问答(1)
2006/10/09 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
windows系统下Python环境搭建教程
2017/03/28 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
英文求职信结束语大全
2013/10/26 职场文书
体育节口号
2014/06/19 职场文书
五四青年节的活动方案
2014/08/20 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书
统计员岗位职责范本
2015/04/14 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL
mysql幻读详解实例以及解决办法
2022/06/16 MySQL