JavaScript實現的類似騰訊QQ聊天窗口抖動效果

下面這個完全可以滿足的你的需求：

1. < span>img src="你的圖片url" onMouseover="shake(this,'onmouseout')"<
3. < span>script type="text/javascript"<
4. var typ =["marginTop","marginLeft"],rangeN=10,timeout=20;
6. function shake(o,end){
7. var range=Math.floor(Math.random()*rangeN);
8. var typN=Math.floor(Math.random()*typ.length);
9. o["style"][typ[typN]]=""+range+"px";
10. var shakeTimer=setTimeout(function(){shake(o,end)},timeout);
11. o[end]=function(){clearTimeout(shakeTimer)};
12. }
13. script<

這個我測試了一下也是很好的一個抖動效果

1. < span>style type="text/css"<
2. #body{text-align:center;}
3. #test{width:119px;position:absolute;margin:10pxauto;height:114px;background:url(http://www.dewen.org/theme/images/default_k.jpg) ;border:2px dotted red;}
4. < span>/style<
6. <div<
7. < span>div<< span>input type="button" value="停止抖動" οnclick="nn.stop()"/<div<
8. < span>div id="test"<div<
9. < span>/div<
12. var m=document.getElementById("test");
13. var nn=newSKclass(m,20,50);
14. functionSKclass(obj,Rate,speed){
15. var oL=obj.offsetLeft;
16. var oT=obj.offsetTop;
17. this.stop=null;
18. this.oTime=null;
19. this.state=0;
20. var om=this;
21. this.start=function(){
22. if(this.state==0){
23. ostart();
24. this.state=1;
25. }
26. }
27. var ostart=function(){
28. if(parseInt(obj.style.left)==oL-2){
29. obj.style.top=oT+2+"px";
30. setTimeout(function(){obj.style.left=oL+2+"px"},Rate)
31. }else{
32. obj.style.top=oT-2+"px";
33. setTimeout(function(){obj.style.left=oL-2+"px"},Rate)
34. }
35. om.oTime=setTimeout(function(){ostart()},speed);
36. }
38. this.stop=function(){
39. clearTimeout(om.oTime);
40. this.state=0;
41. }
42. }
43. script<

這個很像QQ的震動效果，應該是你想要的，而且代碼很簡單

1. < span>img id="win" style='position:relative' src="http://www.jb51.net/upload/20080907101743898.jpg" οnmοuseοver="zd()"<
2. < span>script <
3. function zd(u){
4. var a=['top','left'],b=0;
5. u=setInterval(function(){
6. document.getElementById('win').style[a[b%2]]=(b++)%4< span>2?0:4;
7. if(b<15){clearInterval(u);b=0}
8. },32)
9. }
10. script<

可以使用JQuery第三方插件jrumble來實現，它可以讓頁面任一個元素實現抖動效果：

1. type="text/javascript"src="js/https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"<
2. type="text/javascript"src="js/jquery.jrumble.1.3.js"<
3. // Initialize jRumble on Selector
4. $('#rumble-element').jrumble();
6. // Start rumble on element
7. $('#rumble-element').trigger('startRumble');
9. // Stop rumble on element
10. $('#rumble-element').trigger('stopRumble');