发现一个有趣的东西js做的

 

类似QQ窗口的抖动效果,只是觉得好玩 没什么技术含量。

ContractedBlock.gif ExpandedBlockStart.gif Code
 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2<html xmlns="http://www.w3.org/1999/xhtml">
 3  <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5ExpandedBlockStart.gifContractedBlock.gif     <style type="text/css">
 6ExpandedSubBlockStart.gifContractedSubBlock.gif#body{}{text-align:center;}
 7ExpandedSubBlockStart.gifContractedSubBlock.gif#test{}{width:119px;position:absolute;margin:10px auto;height:114px;background:url(http://www.blueidea.com/articleimg/2008/05/5766/01.jpg) ;border:2px dotted red;}
 8     
</style>
 9     <script type="text/javascript"></script>
10  </head>
11  <body>
12        <div style='margin:10px 200px'>
13        <div><input type="button" value="~~~让我抖抖吧~~" onclick="nn.start()" /></div>
14        <div><input type="button" value="别抖了眼睛晕的很" onclick="nn.stop()" /></div>
15        <div id="test"></div>
16        </div>
17  </body>
18</html>
19ExpandedBlockStart.gifContractedBlock.gif<script type="text/javascript">
20 var m=document.getElementById("test");
21ExpandedSubBlockStart.gifContractedSubBlock.giffunction SKclass (obj,Rate,speed) {
22     var oL=obj.offsetLeft;
23     var oT=obj.offsetTop;
24     this.stop=null;
25     this.oTime=null;
26     this.state=0;
27     var om=this;
28ExpandedSubBlockStart.gifContractedSubBlock.gif     this.start=function(){
29ExpandedSubBlockStart.gifContractedSubBlock.gif        if(this.state==0){
30         ostart();
31         this.state=1;
32        }

33ExpandedSubBlockStart.gifContractedSubBlock.gif        else{alert("这样你受得了吗?")} 
34     }

35ExpandedSubBlockStart.gifContractedSubBlock.gif     var ostart=function(){
36ExpandedSubBlockStart.gifContractedSubBlock.gif             if(parseInt(obj.style.left)==oL-2){
37                obj.style.top=oT+2+"px";
38ExpandedSubBlockStart.gifContractedSubBlock.gif                setTimeout(function(){obj.style.left=oL+2+"px"},Rate)
39             }

40ExpandedSubBlockStart.gifContractedSubBlock.gif             else{
41                obj.style.top=oT-2+"px";
42ExpandedSubBlockStart.gifContractedSubBlock.gif                setTimeout(function(){obj.style.left=oL-2+"px"},Rate)
43            }

44ExpandedSubBlockStart.gifContractedSubBlock.gif        om.oTime=setTimeout(function(){ostart()},speed);
45     }

46ExpandedSubBlockStart.gifContractedSubBlock.gif     this.stop=function(){
47       clearTimeout(om.oTime);
48       this.state=0;
49     
50     }

51}

52var nn=new SKclass(m,20,50);
53
</script>

 

转载于:https://www.cnblogs.com/zhou5791759/archive/2008/10/12/1309449.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值