这篇文章主要介绍了 js 鼠标滑过图片震动特效的方法, 涉及 onMouseOver 事件及图片操作的技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 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 程序设计有所帮助。
来源: