zoukankan      html  css  js  c++  java
  • 基于弹性碰撞原理的抖动式窗口

    先看一下下面这张弹性碰撞图

    从图中我可以看出,球在下落过程中由于受到摩擦力的作用,能量逐渐消耗,从物理上讲,如果一个球从固定高度的高空下落,他所具备的势能为1/2gh*h,好像是亚,但是在下落过程中,这些能量会逐步消耗在克服摩擦力上,下落过程中的受力图示为:
    由于能量逐渐消耗,弹球每次弹起高度会有所降低,因此有拉锯式的下落过程。很有节奏感。
    如果将上面的原理应用到窗口中就可以产生很炫的抖动效果,您的窗口可能就会与众不同。下面就谈一下如何实现这个非常有个性的窗口。
    我们可以将浏览器的四周边缘看作地面,将浮动div图层当作弹球,它从从离某个边缘处一定距离的位置开始接近边缘,当图层某个点碰到边缘的时候,认为产生一次弹性碰撞。当然每次接近或者远离边缘都可以用一个定时器来触发。直到往复固定次数或者当回弹得高度小于固定值得时候,认为图层能量耗尽。才可以正常停靠。
    下面是实现代码:

     1<html>
     2    <head>
     3    <script language='javascript'>
     4    var qiu;
     5    var high;
     6    var speed=0;
     7    var stillHigh=2;
     8    var downInterval;
     9    var upInterval;
    10    var nl;
    11    var haosun=2500;
    12    var timeout=10;
    13    var haosunrate = 0;
    14    window.onload=function(){
    15      qiu = document.getElementById('qiu');
    16      high = qiu.style.pixelLeft;
    17      nl = Math.ceil(high*high*10/2);     
    18      downInterval = window.setInterval("down()",timeout);
    19    }

    20    function down()
    21    {  
    22       speed+=Math.ceil(timeout*10/1000);   
    23       if(high>0)
    24       {
    25           high=qiu.style.pixelLeft-speed;
    26           qiu.style.pixelLeft = high;               
    27       }

    28       else if(high<0)
    29       {
    30          high=0;      
    31          qiu.style.pixelLeft=0;    
    32       }

    33       else if(high==0)
    34       {           
    35            //落地了,准备弹起,当发现能量能支持的高度超过stillHigh,就可以再次弹起
    36            haosun+=haosunrate;
    37            if(haosunrate>0)
    38            {
    39                haosunrate+=80;                
    40            }
         
    41            nl=nl-haosun;          
    42            var h =Math.ceil(Math.sqrt(Math.round(2*nl/10)));                     
    43            if(h>stillHigh)
    44            {
    45                //弹起                
    46                window.clearInterval(downInterval);
    47                upInterval = window.setInterval("up()",timeout);
    48            }

    49            else
    50            {
    51                //全部结束                                  
    52                end();                
    53            }

    54       }
      
    55    }
        
    56    function up()
    57    {
    58       speed-=Math.ceil(timeout*10/1000);          
    59       var h =Math.ceil( Math.sqrt(Math.round(2*nl/10)));           
    60       if(high<h)
    61       {
    62          high = qiu.style.pixelLeft+speed;
    63          qiu.style.pixelLeft = high;
    64       }

    65       else if(high>h)
    66       {
    67          //超过了,则要降到最高点
    68          high=h;
    69          qiu.style.pixelLeft=h;
    70       }

    71       if(high==h)
    72       {
    73          //弹到了最高点
    74          window.clearInterval(upInterval);    
    75          haosun+=haosunrate;         
    76          nl-=haosun;         
    77          downInterval = window.setInterval("down()",timeout);      
    78       }
          
    79    }

    80    function end()
    81    {
    82       window.clearInterval(downInterval);
    83       window.clearInterval(upInterval);
    84       qiu.style.pixelStyle = 0;
    85    }

    86    
    </script>
    87    </head>
    88    <body>
    89        <div id='qiu' style='position:absolute;background-image:url(qiu.jpg);63px;height:56px;left:250px;background-color:red;'></div>
    90    </body>
    91</html>
    92
    源文件:/Files/jillzhang/1.rar
    经过大家提示,修改部分代码,体现了动态变化过程,望继续评论。
  • 相关阅读:
    PTA —— 基础编程题目集 —— 函数题 —— 61 简单输出整数 (10 分)
    PTA —— 基础编程题目集 —— 函数题 —— 61 简单输出整数 (10 分)
    练习2.13 不用库函数,写一个高效计算ln N的C函数
    练习2.13 不用库函数,写一个高效计算ln N的C函数
    练习2.13 不用库函数,写一个高效计算ln N的C函数
    迷宫问题 POJ 3984
    UVA 820 Internet Bandwidth (因特网带宽)(最大流)
    UVA 1001 Say Cheese(奶酪里的老鼠)(flod)
    UVA 11105 Semiprime Hnumbers(H半素数)
    UVA 557 Burger(汉堡)(dp+概率)
  • 原文地址:https://www.cnblogs.com/jillzhang/p/665069.html
Copyright © 2011-2022 走看看