登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

尹小芃槑

<!DOCTYPE HTML>

 
 
 

日志

 
 

JS实现碰壁反弹效果  

2013-09-03 00:08:02|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

看到有些网页上面有一个图片在网页上进行上下左右来回运动,碰壁反弹,测试一下,写了个很简单的,

转载请注明:《尹小芃槑-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实现碰壁反弹效果

  评论这张
 
阅读(379)| 评论(0)

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018