zoukankan      html  css  js  c++  java
  • JS抛物线运动

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="{CHARSET}">
            <title></title>
            <style type="text/css">
                #box{background: greenyellow;
                    border-radius: 50%;
                     90px;
                    height: 90px;
                    position: absolute;
                    left: 20px;
                    top: 200px;                
                    }
            </style>
            <script type="text/javascript">
                onload=function(){
                    var oBox=document.getElementById("box");
                    //给一个速度
                    //水平速度
                    var xSpeed=10;
                    //垂直速度
                    var ySpeed=-30;
                    var timer=setInterval(function(){
                        ySpeed+=3;
                        oBox.style.left=xSpeed+oBox.offsetLeft+"px";
                        oBox.style.top=ySpeed+oBox.offsetTop+"px";
                        //边界判断
                        var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;
                        if (oBox.offsetTop>=clientHeight-oBox.offsetHeight) {
                            //修正位置,正好触底
                            oBox.style.top=clientHeight-oBox.offsetHeight+"px";
                            //修正y的速度,使其向相反的方向运动,并且速度越来越小
                            ySpeed *= -0.6;
                        }
                    },100)
                    //处理一下水平方向的速度,让其越来越慢,最后变为0
                    var timer2 = setInterval(function(){
                        --xSpeed <=0 ? clearInterval(timer2) : "";
                        
                    },2000);
                    
                    
                }
            </script>
        </head>
        <body>
            <div id="box" >
                
            </div>
        </body>
    </html>

  • 相关阅读:
    加载web项目时报的错误:Tomcat version 6.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 Web modul
    js修改title
    14.Android UiAutomator 图像处理
    13.UiAutomator 辅助APK的使用
    12.UiAutomator 获取系统信息
    11.UiAutomator 相关JAVA知识
    10.Android UiAutomator Junit 断言函数的使用
    面向对象基本关键词的解释
    Java图形界面——Border
    java文本编辑器v2.0 图形用户界面
  • 原文地址:https://www.cnblogs.com/qingxh/p/6266320.html
Copyright © 2011-2022 走看看