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 相关文章推荐
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
JavaScript中URL编码函数代码
Jan 11 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 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函数)
2006/10/09 PHP
FCKeditor的安装(PHP)
2007/01/13 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
jquery对dom的操作常用方法整理
2013/06/25 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
使用vant的地域控件追加全部选项
2020/11/03 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
Python完全新手教程
2007/02/08 Python
Python 文件读写操作实例详解
2014/03/12 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
python画图的函数用法以及技巧
2019/06/28 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
化妆师职业生涯规划书
2014/02/16 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
横空出世观后感
2015/06/09 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
Redis实现分布式锁的五种方法详解
2022/06/14 Redis