JS简单回弹原理
/*
*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简单回弹原理的更多相关文章
- JS垂直落体回弹原理
/* *JS垂直落体回弹原理 */ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- js简单实现链式调用
链式调用实现原理:对象中的方法执行后返回对象自身即可以实现链式操作.说白了就是每一次调用方法返回的是同一个对象才可以链式调用. js简单实现链式调用demo Object.prototype.show ...
- Sea.Js的运行原理(转)
1.CMD(Common Module Definition)规范 Sea.js采用了和Node相似的CMD规范,使用require.exports和module来组织模块.但Sea.js比起Node ...
- 原生js简单调用百度翻译API实现的翻译工具
先来个在线demo: js翻译工具 或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现) 或者直接前往该网址:js翻译工具 或者前往我的github:gi ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
- vue.js响应式原理解析与实现
vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...
- 深入解析vue.js响应式原理与实现
vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...
- vuex中mapGetters的使用及简单实现原理
一.项目中的mapGetters在Vue项目的开发过程中必然会使用到vuex,对vue项目公用数据进行管理,从而解决组件之间数据相互通信的问题,如果不使用vuex,那么一些非父子组件之间的数据通信将会 ...
- js 简单的滑动2
js 简单的滑动教程(二) 作者:Lellansin 转载请标明出处,谢谢 现在我们让滑动多一个功能,三张图.点击左边向左滑动,点右向右滑,碰到临界值的时候可以循环滑动 原理也很将简单,用posi ...
随机推荐
- 吴裕雄 python 人工智能——基于Mask_RCNN目标检测(3)
import os import sys import random import math import re import time import numpy as np import cv2 i ...
- 2020年python学习进阶方向
相信很多友人在学习python过程都会遇到很多 虽然python入门很容易 但是难免会遇到瓶颈 遇到问题没人交流 很难提升 对此 给你们简单指点学习方向 1.认识python linux基本 ...
- 【Go语言系列】第三方框架和库——GIN:快速入门
要求要安装Gin软件包,需要:1.安装Go(需要1.11+版本)2.设置Go工作区 安装1.下载并安装 gin: $ go get -u github.com/gin-gonic/gin 2.将 gi ...
- Flask - g变量
传送门 http://flask.pocoo.org/docs/1.0/appcontext/#storing-data http://flask.pocoo.org/docs/1.0/appcont ...
- laravel 报错The Mix manifest does not exist.
这是因为我们在 resources/views/layouts/app.blade.php 中使用 mix() 方法,而我们还未运行 Laravel Mix 进行编译,找不到 mix-manifest ...
- c# 调用c++sdk时结构体与byte数组互转
/// <summary> /// 由结构体转换为byte数组 /// </summary> public static byte[] StructureToByte<T ...
- vs2019本地调试异步程序
1.vs2019创建一个webapi服务,启动本地webapi服务, 2.使用vs2019再打开一个相同的应用程序,并将异步程序所在的程序集设置为启动项,并启动,启动后点击调试->全部拆离 3. ...
- windows和ubuntu安装以太坊客户端Mist
Mist钱包下载地址:https://github.com/ethereum/mist/releases Mist = Ethereum Wallet + Web3 浏览器 Dapp:bancor 史 ...
- Codeforces Round #619 (Div. 2) Ayoub's function
Ayoub thinks that he is a very smart person, so he created a function f(s)f(s) , where ss is a binar ...
- hive启动报错(整合spark)
spark整合hive后,hive启动报错: ls: cannot access /export/servers/spark/lib/spark-assembly-*.jar: No such fil ...