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

更新时间：2015年02月17日 12:04:10 作者：代码家园

这篇文章主要介绍了js鼠标滑过图片震动特效的方法,涉及onMouseOver事件及图片操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

微信小程序之页面拦截器的示例代码
本篇文章主要介绍了微信小程序之页面拦截器的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
javascript实现点击按钮让DIV层弹性移动的方法
这篇文章主要介绍了javascript实现点击按钮让DIV层弹性移动的方法,实例分析了javascript操作div层的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
JavaScript类继承及实例化的方法
这篇文章主要介绍了JavaScript类继承及实例化的方法,较为详细的分析了javascript扩展类、实例化类及类对象与成员函数的使用技巧,需要的朋友可以参考下
2015-07-07
深入学习 JavaScript中的函数调用
可能很多人在学习 JavaScript 过程中碰到过函数参数传递方式的迷惑，本着深入的精神，我给大家分享了一篇教程关于javascript中的函数调用知识，感兴趣的朋友一起学习吧
2017-03-03
判断JavaScript对象是否可用的最正确方法分析
在调试JavaScript的过程中，你是不是经常会遇到object undefined的问题呢？你平时是怎样来测试对象是否存在呢？判断浏览器版本？判断JavaScript版本？本文来告诉你正确的方法。这篇文章涉及的浏览器可能古老一些，但是阐述的道理确实适合现在使用的。
2008-10-10
jQuery Mobile动态刷新页面样式的实现方法
下面小编就为大家带来一篇jQuery Mobile动态刷新页面样式的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
javascript静态页面传值的三种方法分享
这篇文章介绍了javascript静态页面传值的三种方法及优缺点，有需要的朋友可以参考一下
2013-11-11
静态页面实现 include 引入公用代码的示例
下面小编就为大家带来一篇静态页面实现 include 引入公用代码的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
用js调用迅雷下载代码的二种方法
用js调用迅雷下载代码的二种方法，需要的朋友可以参考一下
2013-04-04
简单纯js实现点击切换TAB标签实例
选项卡效果代码，无jq,JS来实现，灰色风格，没有怎么美化，或许看上去比较普通，不过兼容性和操作起来挺舒服的，风格适用于大部分的网站，或许你会用得上。
2015-08-08