js模拟抛物运动和惯性运动

最新推荐文章于 2022-11-08 23:16:26 发布

毛751371041

最新推荐文章于 2022-11-08 23:16:26 发布

阅读量497

点赞数 1

分类专栏： js 文章标签： javascript html css3

本文链接：https://blog.csdn.net/qq_43594636/article/details/109601597

版权

js模拟抛物运动和惯性运动

一.普通移动

利用请求动画帧requesrannamitionframe()----16.67ms执行一次

1.布局

<body>
    <div class="wrap">
       <div class="ball"></div>
</div>
    
</body>

2.CSS样式

 <style>
        .wrap{
            width: 1200px;
            height: 600px;
            background-color: aqua;
            margin: 50px auto;
            position: relative;
        }
        .ball{
            width: 100px;
            height: 100px;
            background-color: red;
/* 设置圆角*/
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>

3.js实现（递归函数实现）

 <script>
        var spX = 3;
        var spY = 3;
        var oB = document.querySelector(".ball");
        var oW = document.querySelector(".wrap");
requestAnimationFrame(function moveBall (){
                  oB.style.left = oB.offsetLeft+spX+"px";
                    oB.style.top =oB.offsetTop+spY+"px";
requestAnimationFrame(moveball);//递归函数持续进行
}

二.在固定范围内运动

*大于最大值就把当前最大值给他并且速度取反

requestAnimationFrame(function moveBall (){
                    var wL = oB.offsetLeft + spX;
                    var wT = oB.offsetTop + spY;
//右
                    if(wL>=oW.offsetWidth-oB.offsetWidth){
                        wL = oW.offsetWidth-oB.offsetWidth;
                        spX = -spX;
                    }
//左
                    if(wL<=0){
                        wL = 0;
                        spX = -spX;
                    }
//下
                    if(wT>=oW.offsetHeight-oB.offsetHeight){
                        wT = oW.offsetHeight-oB.offsetHeight;
                        spY = -spY;
                    }
//上
                    if(wT<=0){
                        wT &#

最低0.47元/天解锁文章

毛751371041

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js模拟抛物运动和惯性运动

js模拟抛物运动和惯性运动一.普通移动利用请求动画帧requesrannamitionframe()----16.67ms执行一次1.布局<body> <div class="wrap"> <div class="ball"></div></div> </body>2.CSS样式 <style> .wrap{ width:
复制链接

扫一扫

专栏目录