原生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请求,在页面无刷新的情况下,实现列表数据的刷新,所 ...
随机推荐
- 用fullPage来实现全屏滚动效果
[注意]所有的page要用div包裹,id为fullpage.不能直接包在body中 [使用fullpage的步骤] 1.导入 JQuery.js,fullpage.js,fullpage.css ...
- Application.DoEvents()和多线程
首先将以下代码放到Button事件里面: private void btnStart_Click(object sender, EventArgs e) { for (int q = 0; ...
- [日常] PHP设置 include_path 配置选项
动态设置php.ini中的include_path 配置选项: 两种方式set_include_path($new_include_path)ini_set('include_path',$new_i ...
- 532 -数组中的K-diff对
例1: 输入: [3,1,4,1,5],k = 2 输出: 2 说明:阵列中有两个2-diff对,(1,3)和(3,5). 虽然我们在输入中有两个1,但我们应该只返回唯一对的数量. 例2: 输入: ...
- js遇到的问题
一些开发前台时遇到的小问题: ----------------------------------------- 一眼看出页面使用html还是html5: html有三种声明方式:<!DOCTY ...
- CentOS 7 隐藏任务栏和顶栏
我使用的是Gnome,对于使用惯了windows的我来说,这个界面确实有点丑,但是,也将就着用了,最近发现有一款软件(Cairo-Dock)可以美化桌面,于是就安装了,但是安装之后发现了一个问题:原来 ...
- js this问题和es6箭头函数this问题
JS中this的四种用法 1.在一般函数方法中使用 this 指代全局对象 function test(){ this.x = 1; alert(this.x); } test(); //1 2.作为 ...
- jQuery源码学习笔记一
学习jQuery源码,我主要是通过妙味视频上学习的.这里将所有的源码分析,还有一些自己弄懂过程中的方法及示例整理出来,供大家参考. 我用的jquery v2.0.3版本. var rootjQuery ...
- 关于java.lang.NoClassDefFoundError: org/apache/commons/collections/FastHashMap的错误解决办法
在JavaEE开发中,在把配置文件中的数据或用户表单提交上来的数据,封装在相应JavaBean的对象的对应属性中时:在实际开发中,使用第三方法工具包BeanUtils(commons-beanutil ...
- Checkpoint not complete
Checkpoint not complete Current log# 2 seq# 876 mem# 0: +DATA/tykfdb/onlinelog/group_2.258.983586883 ...