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实现弹出子窗口并传值给父窗口
Dec 18 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
微信小程序实现tab左右切换效果
Nov 15 Javascript
vue组件tabbar使用方法详解
Nov 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
在线竞拍系统的PHP实现框架(一)
2006/10/09 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
python设置windows桌面壁纸的实现代码
2013/01/28 Python
Python高级用法总结
2018/05/26 Python
Python get获取页面cookie代码实例
2018/09/12 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
Python截图并保存的具体实例
2021/01/14 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
卫校中专生个人自我评价
2013/09/19 职场文书
自荐信要包含哪些内容
2013/11/06 职场文书
物流合作计划书
2014/01/10 职场文书
美发店5.1活动方案
2014/01/24 职场文书
采购部经理岗位职责
2014/02/10 职场文书
汽车转让协议书
2015/01/29 职场文书
材料员岗位职责
2015/02/10 职场文书
论文答辩开场白大全
2015/05/27 职场文书
初中军训感言
2015/08/01 职场文书
解决Redis启动警告问题
2022/02/24 Redis
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技
table不让td文字溢出操作方法
2022/12/24 HTML / CSS