Js模拟重力场【Js动效】

最新推荐文章于 2022-10-30 15:03:23 发布

师兄白泽

最新推荐文章于 2022-10-30 15:03:23 发布

阅读量335

点赞数

分类专栏：前端笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45297286/article/details/122101692

版权

笔记同时被 2 个专栏收录

24 篇文章 3 订阅

订阅专栏

前端

10 篇文章 0 订阅

订阅专栏

Js模拟重力场【Js动效】

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟重力场</title>
    <style>
    	/*小球的样式*/
        .swapper{
            width: 100px;
            height: 100px;
            position: absolute;
            background: #008c8c;
            border-radius: 50%;
        }
    </style>
</head>
<body>
	<!--小球-->
    <div class="swapper">
    </div>
    
    <script>
    	// 获取div
        var oDiv = document.getElementsByClassName('swapper')[0];
        // 定时器
        var timer = null;
        // js为div添加点击事件
        oDiv.onclick = function(){
            console.log("inter click");
            startMove(this);
        }
        // js动画
        function startMove(dom){
            clearInterval(dom.timer);
            // 模拟x轴运动速度
            var iSpeedx = 6;
            // 模拟y轴运动速度
            var iSpeedy = 8;
            // 模拟重力加速度
            var g = 3
            // 设置定时器
            dom.timer = setInterval(function(){
            	// v = v0 + at; 速度逐渐增加
                iSpeedy += g;
                // 顶部和底部的 speed 
                var newTop = dom.offsetTop + iSpeedy;
                var newLeft = dom.offsetLeft + iSpeedx;
                
                // 如果当前的y值位置 >= 文档高度 - dom高度（判断小球是否超出文档）
                if(newTop >= document.documentElement.clientHeight - dom.clientHeight){
                	// speedy 方向改变
                    iSpeedy *= -1;
                    // speedy 与 speedx 速度减少
                    iSpeedy *= 0.8;
                    iSpeedx *= 0.8;
                    newTop= document.documentElement.clientHeight - dom.clientHeight;
                }
                if(newTop <= 0){
                    iSpeedy *= -1;
                    iSpeedy *= 0.8;
                    iSpeedx *= 0.8;
                    newTop = 0;
                }
                if(newLeft >= document.documentElement.clientWidth - dom.clientWidth){
                    iSpeedx *= -1;
                    iSpeedy *= 0.8;
                    iSpeedx *= 0.8;
                    newLeft= document.documentElement.clientWidth - dom.clientWidth;
                }
                if(newLeft <= 0){
                    iSpeedx *= -1;
                    iSpeedy *= 0.8;
                    iSpeedx *= 0.8;
                    newLeft = 0;
                }
                // 最终停止条件
                if(Math.abs(iSpeedx) < 1){
                    iSpeedx = 0;
                }
                if(Math.abs(iSpeedy) < 1){
                    iSpeedy = 0;
                }
                if(iSpeedy == 0 && iSpeedx == 0){
                	// 清除定时器
                    clearInterval(dom.timer);
                    console.log("timer clear all");
                }
                // 改变样式
                dom.style.top = newTop + 'px';
                dom.style.left = newLeft + 'px';
            },30);
            console.log("timer end");
        }
    </script>
</body>
</html>

师兄白泽

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
2
评论
Js模拟重力场【Js动效】

Js模拟重力场【Js动效】<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
复制链接

扫一扫