原生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写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

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

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

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

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

  5. 用原生JS实现一个轮播（包含全部代码和详细思路）

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

  6. 用原生JS写一个网页版的2048小游戏（兼容移动端）

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

  7. 原生js实现一个侧滑删除取消组件（item slide）

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

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

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

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

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

随机推荐

  1. VB里的 dim是什么意思？

    Dim为Dimension的缩写,后面加上所需变量的名字As为变量指定类型程序运行时,Dim语句就根据变量类型为变量分配内存空间

  2. jquery源码学习笔记（一）jQuery的无new构建

    本人是一名.net程序员..... 你一个.net coder 看什么jQuery 源码啊? 原因吗,很简单.技多不压身吗(麻蛋,前端工作好高...羡慕). 我一直都很喜欢JavaScript,废话不 ...

  3. tomcat服务器访问网址组成

    运行tomcat服务器,其他设备访问的网址组成为: http://内网IP:端口/项目名字/网页名字.jsp

  4. 922-按奇偶校验排序数组II

    给定一组A 非负整数,A中的一半整数是奇数,而整数的一半是偶数. 对数组进行排序,以便每当A[i]奇数时,i都是奇数; 无论何时A[i]均匀,i均匀. 您可以返回满足此条件的任何答案数组. 例1: 输 ...

  5. logback和slf4j的使用之logger使用

    原文:https://blog.csdn.net/cw_hello1/article/details/51923814 一.logger标签描述:(了解logger标签之前先看看两个重要概念) 1.主 ...

  6. 虚拟机VMware workstations的网络设置

    一般遇到虚拟机中上不了网的问题,可以这样解决: 1.在终端输入命令:ifconfig.--查看eth0接口上是否有IP地址. 发现eth0接口上没有ip地址. 2.输入cat /etc/sysconf ...

  7. SpringMVC中的拦截器、过滤器的区别、处理异常

    1. SpringMVC中的拦截器(Interceptor) 1.1. 作用 拦截器是运行在DispatcherServlet之后,在每个Controller之前的,且运行结果可以选择放行或拦截! 除 ...

  8. 微信小程序为什么不被看好?

    我自认为对新技术还是比较有热情的,可对于小程序这个“新技术”,我却完全是被动的.去年9月份的时候,微信小程序开始内测,瞬间引爆朋友圈.知乎等一众分享平台.当时我大概了解了一下,觉得从技术角度上来说没啥 ...

  9. Android自定义Button按钮显示样式

    关于listview和button都要改变android原来控件的背景,在网上查找了一些资料不是很全,所以现在总结一下android的selector的用法. 首先android的selector是在 ...

  10. CSS深入理解之overflow（HTML/CSS）

    简介 overflow看上去其貌不扬,其中蕴含的知识点还是很多的,有很多鲜为人知的特性表现. overflow基本属性值 1.visible(默认) 2.hidden 3.scroll 4.auto ...