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实例教程(19) 使用HoTMetal(4)
Dec 23 Javascript
js兼容标准的表格变色效果
Jun 28 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
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循环获取GET和POST值的代码
2008/04/09 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
PHP数组相关函数汇总
2015/03/24 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
DEFER怎么用?
2006/07/01 Javascript
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
ES6小技巧之代替lodash
2019/06/07 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
简单谈谈javascript高级特性
2019/09/04 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
10款最好的Web开发的 Python 框架
2015/03/18 Python
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
python代码过长的换行方法
2018/07/19 Python
Python制作动态字符图的实例
2019/01/27 Python
python list多级排序知识点总结
2019/10/23 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
印度网上药店:1mg
2017/10/13 全球购物
电厂厂长岗位职责
2014/01/02 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书