JavaScript语法 --> 碰壁反弹

港控/mmm° 2022-06-10 06:52 333阅读 0赞

## JavaScript语法 –> 碰壁反弹 ##

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

**代码如下：**

<!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>

**代码解释：**

1.  Css部分：先要设置跳动的元素CSS属性，position:absolute;绝对定位，但不设定left、top属性值，待使用js代码得出。
2.  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;

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

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

效果如图：  
![这里写图片描述][SouthEast 2]

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

[SouthEast]: /images/20220610/19a1ccffbf50473d9aec41fdffdf99d6.png
[SouthEast 1]: /images/20220610/f4a19638a1a945f3bcc8f3bfa9e34b6e.png
[SouthEast 2]: /images/20220610/dcffd6716bf746d8aa728f9da46d4058.png