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动画效果类封装代码
Aug 28 Javascript
JavaScript的eval JSON object问题
Nov 15 Javascript
JavaScript单元测试ABC
Apr 12 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 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实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
DWR Ext 加载数据
2009/03/22 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
Python实现的爬虫刷回复功能示例
2018/06/07 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
python实现随机梯度下降法
2020/03/24 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
C#的几个面试问题
2016/05/22 面试题
学生自我鉴定范文
2013/10/04 职场文书
毕业生求职简历的自我评价
2013/10/23 职场文书
护士长竞聘书
2014/03/31 职场文书
结婚保证书范文
2014/04/29 职场文书
公司员工奖惩制度
2015/08/04 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python