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 相关文章推荐
input的focus方法使用
Mar 13 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 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下对字符串的递增运算代码
2010/08/21 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
Django中的cookie和session
2019/08/27 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
HTML5新增加的功能详解
2016/09/05 HTML / CSS
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
六十岁生日答谢词
2014/01/10 职场文书
团日活动总结书
2014/05/08 职场文书
唐山大地震观后感
2015/06/05 职场文书
重阳节简报
2015/07/20 职场文书
运动会200米广播稿
2015/08/19 职场文书