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 相关文章推荐
用 JavaScript 迁移目录
Dec 18 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 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
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
python通过floor函数舍弃小数位的方法
2015/03/17 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
Python实现注册、登录小程序功能
2018/09/21 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
远程调用的原理
2014/07/05 面试题
物业管理毕业生的自我评价
2014/02/17 职场文书
公司接待方案
2014/03/08 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
工程售后服务方案
2014/06/08 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
沈阳故宫导游词
2015/01/31 职场文书
教师素质教育心得体会
2016/01/19 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书