当前位置：Gxlcms > JavaScript > js模拟QQ窗口的抖动效果

js模拟QQ窗口的抖动效果

时间：2021-07-01 10:21:17 帮助过：6人阅读

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <style type="text/css"> 
#body{text-align:center;} 
#test{width:119px;position:absolute;margin:10px auto;height:114px;background:url(/images/logo.gif) ;border:2px dotted red;} 
     </style> 
     <script type="text/javascript"></script> 
  </head> 
  <body> 
         
        <input type="button" value="~~~让我抖抖吧~~" onclick="nn.start()" /> 
        <input type="button" value="别抖了眼睛晕的很" onclick="nn.stop()" /> 
         
         
  </body> 
</html> 
<script type="text/javascript"> 
 var m=document.getElementById("test"); 
function SKclass (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; 
        } 
        else{alert("这样你受得了吗？")}  
     } 
     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; 
      
     } 
} 
var nn=new SKclass(m,20,50); 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

js模拟QQ窗口的抖动效果

人气教程排行