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 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
基于json的jquery地区联动效果代码
Jul 06 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
angularjs模态框的使用代码实例
Dec 20 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 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
web方式ftp
2006/10/09 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
使用js获取QueryString的方法小结
2010/02/28 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
编写Js代码要注意的几条规则
2010/09/10 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
python模块之StringIO使用示例
2015/04/08 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
python正则表达式实例代码
2020/03/03 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
.NET现在共支持多少种语言
2014/02/26 面试题
工商管理专业学生的自我评价
2013/10/01 职场文书
婚纱店策划方案
2014/05/22 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
水知道答案观后感
2015/06/08 职场文书
php字符串倒叙
2021/04/01 PHP