JavaScript鼠标经过图片晃动效果

原创 2006年06月01日 13:37:00
<!--将以下代码加入HTML的<Body></Body>之间-->

<style>
.shakeimage{
position:relative
}
</style>

<img src=image/family.jpg class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this)">

<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>

鼠标滑过图片抖动晃动效果(css/Shake)

别人网站上看到鼠标经过图片左右抖动晃动的特效,自己也想弄一个,查了查是用到的就是CSS3的特性——Shake Shake使用SASS编写,利用它我们可以实现多种不同样式的抖动效果。这是一个很微小的动画...
  • qq_34827048
  • qq_34827048
  • 2017年07月01日 13:17
  • 1339

鼠标经过图片晃动效果

鼠标经过图片晃动效果.shakeimage{position:relative}http://www.szrgb.net/szrgb/images/logo.jpg" class="shakeimag...
  • JIAYOUXIAOYI
  • JIAYOUXIAOYI
  • 2009年11月12日 09:18
  • 1857

JavaScript鼠标经过图片晃动效果

  • mathewsking
  • mathewsking
  • 2009年01月16日 15:21
  • 588

CSS+JavaScript打造鼠标悬停图片渐显效果!

我们在上网的时候,常常会见到一种图片渐显的效果:在正常状态下,图片呈低透明的状态,即透明度比较低看上去是一种朦胧的效果,而当鼠标移上去的时候,图片渐渐的显示的清晰起来。这样的效果是怎么做出来的呢,我们...
  • shanliwa
  • shanliwa
  • 2007年10月23日 13:52
  • 1253

css3+html+Jquery实现鼠标滑过图片切换效果

css3+html+Jquery实现鼠标滑过图片切换效果 position:relative;/*相对定位:参考物*/ overflow:hidden;/*超出隐藏*/...
  • CSDN___LYY
  • CSDN___LYY
  • 2017年03月26日 18:57
  • 1593

【JavaScript】js可以直接使用的鼠标经过切换图片

js实现简单的鼠标经过切换图片,鼠标移出图片还原。代码如下 window.onload=function() { var oIm...
  • liu_jiachen
  • liu_jiachen
  • 2017年08月03日 19:56
  • 237

鼠标经过或触摸图片放大镜效果

图片放大镜 body{ padding: 0;margin: 0;width: 100%;height:100%;overflow: hidden; } .wrap{ text-align: ...
  • liuqiao1123
  • liuqiao1123
  • 2016年04月15日 12:30
  • 784

Dreamweaver 简单实现鼠标经过图片变换的方法

今天弄一下网页设计,想实现一个鼠标经过图片变换的功能,发觉Dreamweaver里面实现这个功能真的是太方便了,下面举个例子来看看。注:我们的图片是放在站内的 images文件夹里代码示例:其它类型的...
  • fjnu2008
  • fjnu2008
  • 2010年05月07日 12:24
  • 2236

鼠标滑过图片悬停效果

代码运行效果: 鼠标滑过图片效果 body{ background-color: #272727; } ....
  • niuyongaiai
  • niuyongaiai
  • 2016年09月07日 21:04
  • 671

鼠标滑过图片,图片上出现一个遮罩层并显示图片的提示文字

html的内容:                                   //图片                       //提示文字                ...
  • qq_33769914
  • qq_33769914
  • 2016年07月19日 23:07
  • 5374
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript鼠标经过图片晃动效果
举报原因:
原因补充:

(最多只允许输入30个字)