JavaScript语法 --> 碰壁反弹

来源：互联网发布：转发文章赚钱软件编辑：程序博客网时间：2024/04/28 08:16

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 0