js鼠标滑过图片震动特效的方法


Posted in Javascript onFebruary 17, 2015

本文实例讲述了js鼠标滑过图片震动特效的方法。分享给大家供大家参考。具体实现方法如下:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>鼠标滑过 图片震动效果</title>

<STYLE>.shakeimage {

 POSITION: relative

}

</STYLE>

</head>

<body>

<SCRIPT language=JavaScript1.2>

<!--

var rector=3

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>

<img class="shakeimage" onMouseOver="init(this);rattleimage()" onMouseOut="stoprattle(this)" src="/images/csrcode.ico" border="0" style="cursor:pointer;"/>

<img class="shakeimage" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this)" src="/images/changshi.ico"  border="0" style="cursor:pointer;"/>

<img class="shakeimage" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this)" src="/images/links.ico" border="0" style="cursor:pointer;"/>

鼠标滑过图片预览效果。

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 #Javascript
js图片模糊切换显示特效的方法
Feb 17 #Javascript
js实现单击图片放大图片的方法
Feb 17 #Javascript
js实现iframe自动自适应高度的方法
Feb 17 #Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 #Javascript
Jquery树插件zTree用法入门教程
Feb 17 #Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 #Javascript
You might like
php读取msn上的用户信息类
2008/12/05 PHP
PHPEXCEL 使用小记
2013/01/06 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
8个PHP数组面试题
2015/06/23 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
vue按需加载实例详解
2019/09/06 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
python集合常见运算案例解析
2019/10/17 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
美国智能家居专家:tink
2019/06/04 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
应届毕业生个人自我评价
2013/09/20 职场文书
避暑山庄导游词
2015/02/04 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python