js实现简单的碰壁反弹效果


Posted in Javascript onAugust 30, 2016

本文实例可以使用js来实现简单的碰壁反弹效果,具体的内容请大家参考代码部分。 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>碰撞小球</title>
 <style>
 #box{
  width: 1000px;
  height: 800px;
  position: relative;
  border:1px solid red;
  margin:50px auto 0;
 }
 #boll{
  width: 50px;
  height: 50px;
/*  border-radius: 25px;*/
  border:1px solid green;
  position: absolute;
  top: 66px;
  left: 88px;
 }
 </style>
</head>
<body>
 <div id="box">
  <div id="boll"></div>
 </div>
 <script>
  var box=document.getElementById('box');
  var boll=document.getElementById('boll');
  var x=88,y=66,timer1=null,movex=1,movey=1;
  console.log(box.clientWidth-boll.clientWidth);
  console.log(box.clientWidth-boll.offsetWidth);
   timer1=setInterval(function(){
    if (movex) {//判断方向
     x++;
     if (x>=box.clientWidth-boll.clientWidth) {
      movex=0;
     }boll.style.left=x+'px';}
     else{
      x--;
      if (x<=0) {
       movex=1;
      }boll.style.left=x+'px';
     }
    if (movey) {
     y++;
     
     if (y>=box.clientHeight-boll.clientHeight) {
      movey=0;
     }boll.style.top=y+'px';
    }else{
      y--;
      if (y<=0) {
       movey=1;
      }boll.style.top=y+'px';
     }
   },1)
 </script>
</body>
</html>

其中movex和movey两个变量是判断运动的方向。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
jquery.post用法之type设置问题
Feb 24 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
javascript常用代码段搜集
Dec 04 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
易被忽视的js事件问题总结
May 14 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
使用Javascript简单计算器
Nov 17 Javascript
js控住DOM实现发布微博效果
Aug 30 #Javascript
AngularJS动态生成div的ID源码解析
Aug 29 #Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 #Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 #Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 #Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 #Javascript
对js中回调函数的一些看法
Aug 29 #Javascript
You might like
php画图实例
2014/11/05 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
javascript OFFICE控件测试代码
2009/12/08 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python删除特定文件的方法
2015/07/30 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
python支付宝支付示例详解
2019/08/22 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
保安自我鉴定范文
2013/12/08 职场文书
七一表彰活动方案
2014/01/18 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
异地年检委托书范本
2014/09/24 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
导游词之桂林山水
2019/09/20 职场文书
我的收音机情缘
2022/04/05 无线电