看到有些网页上面有一个图片在网页上进行上下左右来回运动，碰壁反弹，测试一下，写了个很简单的，
转载请注明：《尹小芃槑-JS实现碰壁反弹效果》
首先，先写一个大体的布局，代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>碰壁反弹</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{
width:400px;
height:400px;
margin: 50px auto;
position:relative;
border:1px red solid;
}
.con{
height: 50px;
width: 50px;
position: absolute;
background: #00f;
}
</style>
</head>
<body>
<div class='box' id='box'>
<div class="con" id="con">
</div>
</div>
</body></html>
然后，使用JS让小方块动起来，检测是否碰壁，并进行反弹。代码如下：
<script>
var con=document.getElementById('con');
var box=document.getElementById('box');
//初始化方块的位置
var posX=Math.random()*box.clientWidth;
var posY=Math.random()*box.clientHeight;
con.style.left=posX+'px';
con.style.top=posY+'px';
//定义计时器
var timer=null;
//初始化方块的移动速度，正数是向右向上运动，负数是向左向下运动
var movX=20;
var movY=30;
var posRight=box.clientWidth-con.offsetWidth;
var posBottom=box.clientHeight-con.offsetHeight;
timer=setInterval(move,100);
function move(){
posX=posX+movX;
posY=posY+movY;
//当函数运行完时，方块的位置判断，如果碰壁，那么移动方向相反
if (posX<0 || posX>posRight){
movX=-movX;
}
if (posY<0 || posY>posBottom){
movY=-movY;
}
//临界情况处理，若方块要超出边界，则方块的位置为临界值
if (posX<0) {
posX=0;
}
if (posX>posRight) {
posX= posRight;
}
if (posY<0) {
posY=0;
}
if (posY>posBottom) {
posY= posBottom;
}
con.style.left=posX+'px';
con.style.top=posY+'px';
}
</script>
movX和movY可以通知小方块的移动速度。
通过随机数，初始化了小方块一开始的出现位置。
通过对小方块进行绝对定位，使小方块实现运动的效果。
转载请注明：《尹小芃槑-JS实现碰壁反弹效果》
评论