/*
*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. 疫情下的在线上课方案:QQ直播+蓝墨云班课

    目录 疫情下的在线上课方案:QQ群视频(腾讯课堂)+蓝墨云班课 使用QQ进行直播 材料 QQ直播步骤 其他问题 使用蓝墨云班课加强学习效果 教材问题 我的直播-小学生硬笔书法基础 我的直播 - C程序 ...

  2. 基于SILVACO ATLAS的a-IGZO薄膜晶体管二维器件仿真(04)

    在eetop上有好多好东西啊: Silvaco_TCAD_中文教程1 不过这个教程里是Linux系统的,而且工艺仿真占了比较大的篇幅. defect region=1 nta=5e17 wta=0.1 ...

  3. 数据表损坏:Incorrect key file for table

    最近做项目过程中,调用数据库内容,老是出现一些类似于数据表损坏的提示信息(Incorrect key file for table edison_category),查询不到数据,很是恼火,后来冷静下 ...

  4. Manjaro 安装 ibus-rime 输入法

    Manjaro 安装 ibus-rime 输入法 安装软件包: sudo pacman -S ibus ibus-rime yay -S ibus-qt 编辑/添加配置文件~/.xprofile: e ...

  5. Linux 笔记:目录

    目录 Linux的文件系统目录树庞大而复杂.如果你非常熟悉它的话,会极大地提高你应用Linux的技巧. 简单地说,典型的Linux包含五大文件系统目录. 根据你自己系统的需要和大小,这些文件系统目录能 ...

  6. python数组冒号取值操作

    1.冒号的用法 1.1 一个冒号 a[i:j] 这里的i指起始位置,默认为0:j是终止位置,默认为len(a),在取出数组中的值时就会从数组下标i(包括)一直取到下标j(不包括j) 在一个冒号的情况下 ...

  7. Hibernate学习(七)

    Hibernate缓存 1.一级缓存:Session 级别的缓存 2.二级缓存: SessionFactory 级别的缓存 3.查询缓存:需二级缓存的支持,查询缓存依赖二级缓存 一级缓存 1.依赖于 ...

  8. 显ipQQ

    链接:https://pan.baidu.com/s/1l1WN4b3jT8n4e66DH8d-cg 提取码:kjm4

  9. Springboot三层架构

    control调用service调用dao

  10. httpclient使用-get-post-传参

    转自:https://www.jianshu.com/p/375be5929bed 一.HttpClient使用详解与实战一:普通的GET和POST请求 简介 HttpClient是Apache Ja ...