JavaScript实现的类似腾讯QQ聊天窗口抖动效果

最新推荐文章于 2018-06-12 20:54:56 发布

转载最新推荐文章于 2018-06-12 20:54:56 发布 · 944 阅读

本文介绍了如何使用JavaScript实现网页元素的动态抖动和震动效果，包括简单的CSS抖动实现、类似QQ震动效果的实现，以及利用jQuery第三方插件jrumble实现更为复杂的动态效果。此外，还提供了不同实现方式的代码示例，帮助开发者轻松地为网站添加互动元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面这个完全可以满足的你的需求：

																							< span>img src="你的图片url" onMouseover="shake(this,'onmouseout')"<  
< span>script type="text/javascript"<  
var typ =["marginTop","marginLeft"],rangeN=10,timeout=20; 
function shake(o,end){ 
var range=Math.floor(Math.random()*rangeN); 
var typN=Math.floor(Math.random()*typ.length); 
 o["style"][typ[typN]]=""+range+"px"; 
var shakeTimer=setTimeout(function(){shake(o,end)},timeout); 
 o[end]=function(){clearTimeout(shakeTimer)}; 
} 
script< 
这个我测试了一下也是很好的一个抖动效果

																									< span>style type="text/css"<  
#body{text-align:center;} 
#test{width:119px;position:absolute;margin:10pxauto;height:114px;background:url(http://www.dewen.org/theme/images/default_k.jpg) ;border:2px dotted red;} 
< span>/style<  
 
 
 
<div< 
< span>div<< span>input type="button" value="停止抖动" onclick="nn.stop()"/<div<  
< span>div id="test"<div<  
< span>/div<  
 
var m=document.getElementById("test"); 
var nn=newSKclass(m,20,50); 
functionSKclass(obj,Rate,speed){ 
var oL=obj.offsetLeft; 
var oT=obj.offsetTop; 
this.stop=null; 
this.oTime=null; 
this.state=0; 
var om=this; 
this.start=function(){ 
if(this.state==0){ 
 ostart(); 
this.state=1; 
} 
} 
var ostart=function(){ 
if(parseInt(obj.style.left)==oL-2){ 
 obj.style.top=oT+2+"px"; 
 setTimeout(function(){obj.style.left=oL+2+"px"},Rate) 
}else{ 
 obj.style.top=oT-2+"px"; 
 setTimeout(function(){obj.style.left=oL-2+"px"},Rate) 
} 
 om.oTime=setTimeout(function(){ostart()},speed); 
} 
this.stop=function(){ 
 clearTimeout(om.oTime); 
this.state=0; 
} 
} 
script< 
这个很像QQ的震动效果，应该是你想要的，而且代码很简单

																											< span>img id="win" style='position:relative' src="http://www.jb51.net/upload/20080907101743898.jpg" onmouseover="zd()"<  
< span>script <  
function zd(u){ 
var a=['top','left'],b=0; 
 u=setInterval(function(){ 
 document.getElementById('win').style[a[b%2]]=(b++)%4< span>2?0:4;  
if(b<15){clearInterval(u);b=0} 
},32) 
} 
script< 
可以使用JQuery第三方插件jrumble来实现，它可以让页面任一个元素实现抖动效果：

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