js反弹运动

最新推荐文章于 2022-03-17 14:41:29 发布

weixin_30701521

最新推荐文章于 2022-03-17 14:41:29 发布

阅读量72

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lxystar/p/10471640.html

版权

js反弹运动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
         <style>
        .ball {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            position: absolute;
            top: 200px;
            left: 0;
            background: skyblue;
        }
    </style>
    </head>
    <body>
        <button>飞起来</button>
        <div class="ball"></div>
        <!-- <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script> -->
        <script type="text/javascript">
            var speedX=6;
            var speedY=-10;
            var timer=null;
            var btn = document.querySelector("button");
            var ball = document.querySelector(".ball");
            btn.onclick=function(){
                clearInterval(timer);
                timer=setInterval(function(){
                     ball.style.left=ball.offsetLeft+speedX+"px";
                     ball.style.top=ball.offsetTop+speedY+"px"; 
                     var maxT=window.innerHeight-ball.offsetHeight;
                     var maxL=window.innerWidth-ball.offsetWidth;
                     if(ball.offsetTop<0){
                        speedY*=-1;
                        ball.style.top=0;
                     }else if(ball.offsetTop>maxT){
                        speedY*=-1;
                        ball.style.top=maxT+"px";
                     }
                     if(ball.offsetLeft<0){
                         ball.style.left=0;
                          speedX*=-1;
                     }else if(ball.offsetLeft>maxL){
                         ball.style.left=maxL+"px";
                         speedX*=-1;
                     }
                     
                 }
                ,30)
            }
        </script>
    </body>
</html>

转载于:https://www.cnblogs.com/lxystar/p/10471640.html