原生js实现一个DIV的碰撞反弹运动:

  关键在于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=6;
var speedy=8;
var t=null;
btn.onclick=function(){
clearInterval(t);
t=setInterval(function(){
var l=div.offsetLeft+speedx;
var t=div.offsetTop+speedy; if(l>=document.documentElement.clientWidth-div.offsetWidth){
speedx*=-1;
l=document.documentElement.clientWidth-div.offsetWidth;
}else if(l<=0){
speedx*=-1;
l=0;
}
if(t>=document.documentElement.clientHeight-div.offsetHeight){
speedy*=-1;
t=document.documentElement.clientHeight-div.offsetHeight;
}else if(t<=0){
speedy*=-1;
t=0;
}
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的碰撞反弹运动的更多相关文章

  1. 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果

    继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...

  2. 使用原生JS实现一个风箱式的demo,并封装了一个运动框架

    声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的 ...

  3. 原生js实现一个简单的轮播图

    想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...

  4. 用原生JS实现一个轮播(包含全部代码和详细思路)

    在我看来要想实现轮播主要是要知道当前位于的页面和即将位于的页面.这个案例是通过改变图片的透明度来实现轮播的效果. 我把涉及的知识点分为两个方面,分别是HTML+css和JS. 第一部分(html+cs ...

  5. 用原生JS写一个网页版的2048小游戏(兼容移动端)

    这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...

  6. 原生js实现一个侧滑删除取消组件(item slide)

    组件,本质上是解决某个问题封装的类,在此记录原生js实现侧滑删除 先上效果图 实现思路 1. 确定渲染的数据结构 2. 思考划分布局,总的有两个主要的模块:内容区域和按钮区域 2.1 内容区域保持宽度 ...

  7. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  8. 原生 JS实现一个简单分页插件

    最近做的一个 PC端的需求,这个需求中有一个小点,页面底部有一块列表区域,这个列表的数据量比较大,需要进行分页控制,切换页码的时候,发送一个 ajax请求,在页面无刷新的情况下,实现列表数据的刷新,所 ...

  9. 使用原生JS封装一个动画函数

    最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一 ...

随机推荐

  1. 更改cmd代码页,修正语言显示

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 rem 英文 chcp 437   rem 日文 chcp 932   rem 简体中文 chcp 936   re ...

  2. Windows平台上C++开发内存泄漏检查方法

    充分的利用调试工具可以非常方便地避免内存泄漏问题. 这里介绍两种方法,互为补充,第一种是VC编译器提供的方法,第二种是专用的内存泄漏检查工具Memmory Validator.这两种方法的基本原理是一 ...

  3. Eyeshot Ultimate 学习笔记(3)

    实体角度和位置的控制 有时候导入的模型方向或者角度不太适合,就需要调节一下,这里我发现的一种方法是用到Transformation类,其实有很多类的运用都非常灵活,如果不是有官方示例,恐怕是很难发现的 ...

  4. nginx + memcached-session-manager 实现tomcat下的负载均衡

    1. tomcat6.0 配置 memcached-session-manager 实现session共享 1.1 下载memcached-session-manager-1.6.5.jar.memc ...

  5. with ffmpeg to encode video for live streaming and for recording to files for on-demand playback

    We've been doing some experimentation with ffmpeg to encode video for live streaming and for recordi ...

  6. css中的定位

    上一篇博客,我大概介绍了下浮动的使用及行为.其实在整个文档布局中,定位也对我们整个的页面排版有非常好的帮助,当然前提是使用得当. 一.定位分类: a.静态定位  position:static;   ...

  7. 根据Mob官网的天气预报接口写了一个简单的demo

    第一步 自己注册一个应用,然后获取里面的 App Key,下载MobAPI SDK 然后拖入 MobAPI.framework 和 MOBFoundation.framework 到你的项目中 第二步 ...

  8. Exception: Unexpected End Of File(crontab)

    Exception: Unexpected End Of File [solphire@hadoop02 tools]$ crontab -l 1 * * * * source /etc/profil ...

  9. C++使用thread类多线程编程

    转自:C++使用thread类多线程编程 C++11中引入了一个用于多线程操作的thread类,下面进行简单演示如何使用,以及如果进行多线程同步. thread简单示例 #include <io ...

  10. 【UVA11107 训练指南】Life Forms【后缀数组】

    题意 输入n(n<=100)个字符串,每个字符串长度<=1000,你的任务是找出一个最长的字符串使得超过一半的字符串都包含这个字符串. 分析 训练指南上后缀数组的一道例题,据说很经典(估计 ...