原生js实现一个DIV的碰撞反弹运动，并且添加重力效果
继上一篇。。。
原生js实现一个DIV的碰撞反弹运动，并且添加重力效果
关键在于边界检测，以及乘以的系数问题，实现代码并不难，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;}
div{height:100px;width:100px;background:red;position:absolute;}
/*添加绝对定位*/ </style>
<script>
window.onload=function(){
var btn=document.getElementById("btn");
var div=document.getElementById("div");
var speedx=300;
var speedy=200;
var timer=null;
btn.onclick=function(){
clearInterval(timer);
timer=setInterval(function(){
speedy+=3;
var l=div.offsetLeft+speedx;
var t=div.offsetTop+speedy;
if(t>=document.documentElement.clientHeight-div.offsetHeight){
speedy*=-0.8;
speedx*=0.8;
t=document.documentElement.clientHeight-div.offsetHeight;
}else if(t<=0){
speedy*=-0.8;
speedx*=0.8;
t=0;
}
if(l>=document.documentElement.clientWidth-div.offsetWidth){
speedx*=-0.8;
l=document.documentElement.clientWidth-div.offsetWidth;
}else if(l<=0){
speedx*=-0.8;
l=0;
}
if(Math.abs(speedx)<1){
speedx=0;
}
if(Math.abs(speedy)<3){ //注意这块儿
speedy=0;
}
if(speedx==0&&speedy==0){
console.log(speedx+" "+speedy);
clearInterval(timer);
}
div.style.left=l+"px";
div.style.top=t+"px";
},10);
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="开始运动">
<div id="div"></div>
</body>
</html>
原生js实现一个DIV的碰撞反弹运动，并且添加重力效果的更多相关文章
- 原生js实现一个DIV的碰撞反弹运动
原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en& ...
- 用原生js写一个"多动症"的简历
用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...
- 使用原生JS实现一个风箱式的demo，并封装了一个运动框架
声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的 ...
- 原生js实现一个简单的轮播图
想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...
- 用原生JS实现一个轮播（包含全部代码和详细思路）
在我看来要想实现轮播主要是要知道当前位于的页面和即将位于的页面.这个案例是通过改变图片的透明度来实现轮播的效果. 我把涉及的知识点分为两个方面,分别是HTML+css和JS. 第一部分(html+cs ...
- 用原生JS写一个网页版的2048小游戏（兼容移动端）
这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...
- 原生js实现一个侧滑删除取消组件（item slide）
组件,本质上是解决某个问题封装的类,在此记录原生js实现侧滑删除 先上效果图 实现思路 1. 确定渲染的数据结构 2. 思考划分布局,总的有两个主要的模块:内容区域和按钮区域 2.1 内容区域保持宽度 ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- 原生 JS实现一个简单分页插件
最近做的一个 PC端的需求,这个需求中有一个小点,页面底部有一块列表区域,这个列表的数据量比较大,需要进行分页控制,切换页码的时候,发送一个 ajax请求,在页面无刷新的情况下,实现列表数据的刷新,所 ...
随机推荐
- 【转】Spring事务异常回滚，捕获异常不抛出就不会回滚
最近遇到了事务不回滚的情况,我还考虑说JPA的事务有bug? 我想多了....... 为了打印清楚日志,很多方法我都加tyr catch,在catch中打印日志.但是这边情况来了,当这个方法异 ...
- python数据类型之集合
对python中集合的理解 集合是一个无序的,不重复的数据组合,它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之前的交集.差集.并集等关系 常用操作 s = set ...
- Spring Boot 表单验证、AOP统一处理请求日志、单元测试
一.使用@Valid表单验证 于实体类中添加@Min等注解 @Entity public class Girl { @Id @GeneratedValue private Integer id; pr ...
- Bash：常用命令工具-tr命令
tr命令可以用来做简单的字符替换与删除,常用的有-d, -s选项.它的替换与删除是按单个字符来的 假设有以下文本: Read from the file words.txt and output th ...
- 谷歌浏览器network请求时间（stalled，DNS Lookup，Waiting）分析以及解决方案
network工具功能强大,能够让我看到网页加载的信息,比如加载时间,和先后顺序,是否是并行加载,还是堵塞加载. 默认情况下有八列: (1).Name:表示加载的文件名. (2).Method:表示请 ...
- DotNetBar的使用—（界面风格）
C# WinForm项目中自带的窗体风格很普通,一点都不美观.DotNetBar就是一套.NET美化控件库,有70几个控件以及多种界面的皮肤风格.关于控件的效果在官网上进行查看http://www.d ...
- Django之WSGI浅谈
一.什么是Web框架 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统. 浏览器与服务器之间发起HTTP请求: 1.浏览器发送一 ...
- FineReport中如何用JavaScript自定义地图标签
在日常使用地图过程中,通常会遇到地图标签,提示点等显示不满足我们的需求,需要进行JavaScript代码编写. 例如:在使用地图过程中,会发现很多地名显示的位置偏离.这时候就需要使用JavaScrip ...
- Eclipse环境开发Teamcenter RAC
外包发过来的RAC程序老是报错,导致测试走不下去.Bug修复响应太慢,用jad看了下代码也不是很复杂,决定自己调试.在Eclipse 环境下开发Teamcenter RAC一般是用Eclipse,在做 ...
- Pig order by用法举例
sorted = order data by $0; 数值类型按照数值大小比较 chararray类型按照字符的字典顺序比较 bytearray按照字节的字典顺序比较 复杂类型(map.tuple ...