/*

 *JS简单回弹原理

 */

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <style type="text/css">

 *{ padding:0; margin:0;}

 #div1 { width:100px; height:100px; position:absolute; background:red;}

 </style>

 <script type="text/javascript">

 window.onload = function (){

     startMove("div1");

     function startMove(id){

          var iSpeedX = 10;

          var iSpeedY = 10;

         setInterval(function(){

             var oDiv = document.getElementById(id);

              var l = oDiv.offsetLeft + iSpeedX;　　　　//物体在X方向上的位移

              var t = oDiv.offsetTop + iSpeedY;　　　　//物体在Y方向上的位移

             document.title = l + " , " + t + " , " + iSpeedX + " , " + iSpeedY;　　　　//在标题栏显示位移坐标和当前在X、Y方向上的速度

              if(t > document.documentElement.clientHeight - oDiv.offsetHeight){　　　　//判断物体在Y方向上是否超出屏幕可视区的底部

                 t =  document.documentElement.clientHeight - oDiv.offsetHeight;

                 iSpeedY *= -1;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//改变当前在Y方向上的速度、回弹

              }else if(t < 0){　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//判断物体在Y方向上是否超出屏幕可视区的顶部

                 t = 0;

                 iSpeedY *= -1;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//再改变当前在Y方向上的速度、回弹

              }

              if(l > document.documentElement.clientWidth - oDiv.offsetWidth){　　　　　　//判断物体当前在X方向上是否超出屏幕可视区的右边

                 l = document.documentElement.clientWidth - oDiv.offsetWidth;

                 iSpeedX *= -1; 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//改变当前在X方向上的速度、回弹

              }else if(l < 0){　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//判断物体当前在X方向上是否超出屏幕可视区的左边

                 l = 0;

                 iSpeedX *= -1;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//改变当前物体在X方向上的速度、回弹

              }

              oDiv.style.left = l + "px";

              oDiv.style.top = t + "px";

         },30);

     }

 }

 </script>

 </head>

 <body>

 <div id="div1"></div>

 </body>

 </html>
  • 给物体初始一个在X、Y方向上的运动速度。
  • 通过定时器改变物体左右坐标改变left、top的值来实现位移效果
  • 判断物体是否超出可视区的边界值(改变物体在X、Y方向的速度)

JS简单回弹原理的更多相关文章

  1. JS垂直落体回弹原理

    /* *JS垂直落体回弹原理 */ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. js简单实现链式调用

    链式调用实现原理:对象中的方法执行后返回对象自身即可以实现链式操作.说白了就是每一次调用方法返回的是同一个对象才可以链式调用. js简单实现链式调用demo Object.prototype.show ...

  3. Sea.Js的运行原理(转)

    1.CMD(Common Module Definition)规范 Sea.js采用了和Node相似的CMD规范,使用require.exports和module来组织模块.但Sea.js比起Node ...

  4. 原生js简单调用百度翻译API实现的翻译工具

    先来个在线demo: js翻译工具 或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现) 或者直接前往该网址:js翻译工具 或者前往我的github:gi ...

  5. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  6. vue.js响应式原理解析与实现

    vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...

  7. 深入解析vue.js响应式原理与实现

    vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...

  8. vuex中mapGetters的使用及简单实现原理

    一.项目中的mapGetters在Vue项目的开发过程中必然会使用到vuex,对vue项目公用数据进行管理,从而解决组件之间数据相互通信的问题,如果不使用vuex,那么一些非父子组件之间的数据通信将会 ...

  9. js 简单的滑动2

    js 简单的滑动教程(二)   作者:Lellansin 转载请标明出处,谢谢 现在我们让滑动多一个功能,三张图.点击左边向左滑动,点右向右滑,碰到临界值的时候可以循环滑动 原理也很将简单,用posi ...

随机推荐

  1. 如何修改mysql 默认引擎为InnoDB？

    1.查看 MySQL支持的引擎有哪些? show engines: 结果: 由上图可以看出,只有 InnoDB 是支持事务的 2.查看默认引擎 show variables like “default ...

  2. 【代码学习】PYTHON装饰器

    一.装饰器 对原代码不修改的基础上完善代码 写代码要遵循开放封闭原则,虽然在这个原则是用的面向对象开发,但是也适用于函数式编程,简单来说,它规定已经实现的功能代码不允许被修改,但可以被扩展,即: 封闭 ...

  3. zookeeper使用及安装

    1.安装查看:http://ifeve.com/zookeeper-talk-quick-start/ 2.使用: Zookeeper是一个高性能的分布式应用协调服务的框架.Zookeeper=Zoo ...

  4. Block Chain Learning Notes

    区块链是什么 区块链技术是由比特币创造的,本文也将从比特币开始进行引导,一步一步告诉大家什么是区块链.如果你想立马知道区块链是什么,也可以直接转到文章末尾的区块链定义. 区块链,可能是当下最有前景又充 ...

  5. django模块导入/函数/中间件/MVC和MTV/CSRF

    目录 一:模块导入 二:函数 三:中间件 四:MVC和MTV 五:csrf 一:模块导入 第一种:继承 这里的母版更像是一个架子,子板都是定义的内容(如果多个页面中 ,存在相同的页面:这样我们可以抽到 ...

  6. Vue项目中sass语法该怎么用？

    最近开始着手Vue框架,被各种报错蹂躏,其中有一个就是sass语法,<style>标签中添加<style lang="scss">,发现报错,在网上找了一些 ...

  7. 「NOI2001」食物链

    传送门 Luogu 解题思路 带权并查集我不会啊 考虑种类并查集(扩展域并查集的一种). 开三倍空间,一倍维护本身,二倍维护猎物,三倍维护天敌,然后用并查集搞一搞就好了. 细节注意事项 咕咕咕 参考代 ...

  8. Django中url name

    花了好长时间才明白这个name参数的含义.便写下来了备忘 当我们在url的时候,一般情况下都是使用很明确的url地址.如在网页里面使用<a href="/login"> ...

  9. redis的使用1

    学Linux已经将近一个月了,Linux中讲到的redis的使用,到现在还不回具体的使用在php中,今天周末,于是想把redis的使用搞懂. 网上的资料不算多,但还需要硬着头皮学.其中找到这样一篇关于 ...

  10. 《梳理业务的三个难点》---创业学习---训练营第二课---HHR---

    一,<开始学习> 1,融资的第一步:把业务一块一块的梳理清楚. 2,预热思考题: (1)投资人会问能做多大,天花板怎么算?你的答案可以得到大家的认同吗?(四种方法,直接引用,自顶向下,自底 ...