这是我一本书上的源码 ,正好能实现你想要的效果~~ <style>
.shakeimage{
position:relative
}
</style><img src=tu02.jpg class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this)">
<script language="JavaScript">
var rector=3
var stopit=0
var a=1function 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>
.shakeimage{
position:relative
}
</style><img src=tu02.jpg class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this)">
<script language="JavaScript">
var rector=3
var stopit=0
var a=1function 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>
<script>
var Style,offset=3,timer,dir=3
//offset为图片抖动时的偏移量,dir为抖动方向
document.onmouseover=function(){
with(event.srcElement)
if(tagName=="IMG"&&className=="shade"){
Style=style
shade()
}
}
document.onmouseout=function(){
if(Style){
clearTimeout(timer)
Style.posTop=Style.posLeft=0
}
}
function shade(){
eval("Style.pos"+["Top","Left"][(dir+=dir<4?1:-3)%2]+"+=offset*(dir-3+dir%2)")
timer=setTimeout("shade()",50)
}
</script>
这段加在网页里,然后每张图片的引用代码<img 后面加个class="shade"
<style>
a{position:relative; }
a:hover img {position:absolute;left:2px;top:2px;}</style><a href="#"><img src="#"></a>