原生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请求,在页面无刷新的情况下,实现列表数据的刷新,所 ...
随机推荐
- The type org.springframework.jms.JmsException cannot be resolved报错解决
在调用JmsTemplate的send方法时,一直报编译时异常.如下: 异常提示是无法解析org.SpringFrawork.jms.JmsException类型.如下: The type org.s ...
- Sqlserver 备份
Transact-SQL 语法规则 Transact-SQL 引用中的语法关系图使用下列规则. 大写 : Transact-SQL 关键字. 斜体 : Transact-S ...
- ubuntu上使用vim编辑文本内容
1. 什么是 vim? Vim是从 vi 发展出来的一个文本编辑器.代码补完.编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用.简单的来说, vi 是老式的字处理器,不过功能已经很齐全了, ...
- Struts初始
1.首先我们先创建一个maven的简单工程, 如图 然后点击创建一个简单的工程,点击下一步, 然后, 再次输入工程的各项信息,1组织名,2.项目名称,版本名,一般为默认,3,jar包暂时默认,当前的j ...
- iOS 交互h5 - WKWebView
众所周知,UIWebView存在内存问题,也就是当加载一个UIWebView时,内存会一直上升趋势无法得到释放.这样在使用UIWebView进行h5交互开发时会有很大的问题. 因而苹果增加了一个新的类 ...
- 从 Hadoop 1.0 到 Hadoop 2.0 ，你需要了解这些
学习大数据,刚开始接触的是 Hadoop 1.0,然后过度到 Hadoop 2.0 ,这里为了书写方便,本文中 Hadoop 1.0 采用 HV1 的缩写方式,Hadoop 2.0 采用 HV2 的缩 ...
- easyUi datagrid鼠标经过提示单元格内容
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. jquery.cellTip.js /** * 扩展两个方法 */ using('datagrid', function() ...
- 【1】Singleton模式（单例模式）
一.单例模式的介绍 说到单例模式,大家第一反应应该就是--什么是单例模式?从“单例”字面意思上理解:一个类只有一个实例.所以单例模式也就是保证一个类只有一个实例的一种实现方法罢了(设计模式其实就是帮助 ...
- Linux 调试: systemtap
安装与配置 在ubuntu下直接用apt-get install之后不能正常使用,提示缺少调试信息或者编译探测代码时有问题. 1. 采用官网上的解决方法 2. 可以自己重新编译一次内核,然后再手工编译 ...
- AE三维点击查询(3D Identify)的实现(转）
AE三维点击查询(3D Identify)的实现,类似ArcGIS的Identify对话框/////////////////////////////////////////////////////// ...