JavaScript语法 --> 碰壁反弹

最新推荐文章于 2024-06-14 20:39:31 发布

王鹏--博客

最新推荐文章于 2024-06-14 20:39:31 发布

阅读量1k

点赞数 1

分类专栏： JavaScript 文章标签： javascript css 定时器

本文链接：https://blog.csdn.net/wpengBlog/article/details/77128020

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JavaScript语法 –> 碰壁反弹

在js语法中，正确使用clientWidth、offsetWidth等属性，并结合定时器，可以形成如下所示碰壁反弹效果。
这里写图片描述

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>碰壁反弹</title>
    <style type="text/css">  
        #mod {
            position:relative; 
            width: 500px; 
            height: 300px; 
            margin: 0px auto; 
            border:5px #000 solid;
        }
        #box {
            position:absolute;
            width: 50px; 
            height: 50px; 
            line-height:50px; 
            text-align:center; 
            color:#fff; 
            background: #00f; 
            border-radius:50%;
        }
    </style>
</head>
<body>
    <div id="mod">
        <div id="box">1</div>
    </div>
    <script type="text/javascript">    
        function rebound() {
            var mod = document.getElementById("mod");
            var box = document.getElementById("box");

            var maxWidth = mod.clientWidth - box.offsetWidth;
            var maxHeight = mod.clientHeight - box.offsetHeight;

            var top = box.offsetTop,
                left = box.offsetLeft;

            var speedY = 5,
                speedX = 2;

            function move() {
                top += speedY;
                left += speedX;

                if (top >= maxHeight) {  
                    speedY *= -1;
                }else if (top <= 0) {  
                    speedY *= -1;
                }

                if (left >= maxWidth) {  
                    speedX *= -1;
                }else if (left <= 0) {  
                    speedX *= -1;
                }

                box.style.left = left +"px";
                box.style.top = top +"px";
            }

            function autoPlay(){
                setInterval(move,10);
            }
            autoPlay();
        }
        rebound();
    </script>
</body>
</html>

代码解释：

Css部分：先要设置跳动的元素CSS属性，position:absolute;绝对定位，但不设定left、top属性值，待使用js代码得出。
js部分：
1>.clientWidth不包括边框的可视宽（width+padding），clientHeight不包括边框的可视高（height+padding）。
2>.offsetWidth包括边框的宽（width+padding+border）、offsetHeight包括边框的高（height+padding+border）。
3>.最大运动宽、高 = 容器不包括边框的可视宽、高 - 跳动元素包括边框的宽、高。
4>.speedX水平方向的速度、speedY垂直方向的速度。
5>. speedY = -1; speedX = -1;当元素超出设定范围的一瞬间，速度变为负值，元素反向移动。
6>.box.style.left = left +”px”;box.style.top = top +”px”;使用js得到Css属性中绝对定位的left、top属性值。
7>.定时器不变，当速度值变大，元素移动速度变快。

var speedY = 10,
    speedX = 5;

效果如图：
这里写图片描述
8>.速度不变，当定时器定时值变大，元素移动速度变慢。

function autoPlay(){
    setInterval(move,30);
}
autoPlay();

效果如图：
这里写图片描述

以上就是使用js代码达到碰壁反弹效果，希望对大家有所帮助。

王鹏--博客

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
JavaScript语法 --> 碰壁反弹

JavaScript语法定时器 Css属性 –> 碰壁反弹
复制链接

扫一扫

专栏目录

JavaScript语法 --> 碰壁反弹

JavaScript语法 –> 碰壁反弹

“相关推荐”对你有帮助么？