当前位置: 首页 > 编程笔记 >

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

杜联
2023-03-14
本文向大家介绍js鼠标滑过图片震动特效的方法,包括了js鼠标滑过图片震动特效的方法的使用技巧和注意事项,需要的朋友参考一下

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

 类似资料:
  • 本文向大家介绍js实现鼠标经过时图片滚动停止的方法,包括了js实现鼠标经过时图片滚动停止的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现鼠标经过时图片滚动停止的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的javascript程序设计有所帮助。

  • 本文向大家介绍jquery实现鼠标滑过后动态图片提示效果实例,包括了jquery实现鼠标滑过后动态图片提示效果实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery实现鼠标滑过后动态图片提示效果。分享给大家供大家参考。具体如下: 这里jquery实现的鼠标悬停图片提示效果,把鼠标放在图片上的时候,图片向右上角滑动并缩小,同时提示显示出来,类似幻灯片一样的效果,推荐给大家学习借鉴。

  • 本文向大家介绍jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果,包括了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果。分享给大家供大家参考,具体如下: 这里演示jQuery实现鼠标移动到链接上,滑动展开/隐藏图片效果,鼠标放在“上一页”“下一页”上,立即浮现出所对应的图

  • 本文向大家介绍javascript实现图片跟随鼠标移动效果的方法,包括了javascript实现图片跟随鼠标移动效果的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript实现图片跟随鼠标移动效果的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的javascript程序设计有所帮助。

  • 本文向大家介绍jquery实现鼠标滑过小图查看大图的方法,包括了jquery实现鼠标滑过小图查看大图的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery实现鼠标滑过小图查看大图的方法。分享给大家供大家参考。具体实现方法如下: 1. CSS部分: 2. HTML部分: 3. javascript部分: 希望本文所述对大家的jquery程序设计有所帮助。

  • 本文向大家介绍js鼠标点击图片实现随机变换图片的方法,包括了js鼠标点击图片实现随机变换图片的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js鼠标点击图片实现随机变换图片的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的javascript程序设计有所帮助。