继上一篇。。。

原生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的碰撞反弹运动，并且添加重力效果的更多相关文章

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

     原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en& ...

  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. ObjectMapper将json转对象报错处理

    在使用ObjectMapper将json转对象,调用mapper.readValue(jsonStr, XwjUser.class)时,报如下错: com.fasterxml.jackson.data ...

  2. FacebookFriendAdderPro

    Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\Fe ...

  3. 【基于初学者的SSH】struts02 数据封装的三种方式详解

    struts的数据封装共有3中方式,属性封装,模型驱动封装和表达式封装,其中表达式封装为常用 一:属性封装: 属性封装其实就是自己定义变量,注意变量名要和表单的name属性名一致,然后生成get和se ...

  4. oracle网页客户端工具

    Oracle数据库的管理相较于其他数据库,是比较麻烦的,客户端工具的安装都要花一些时间,目前有一款treesoft软件,通过网页的方式管理Oracle. 功能包括:数据库的展示,库表的展示,表字段结构 ...

  5. 高并发第六弹:线程封闭(ThreadLocal)

    当访问共享的可变数据时,通常需要使用同步.一种避免使用同步的方式就是不共享数据.如果仅在单线程内访问数据,就不需要同步.这种技术被称为线程封闭. 它其实就是把对象封装到一个线程里,只有一个线程能看到这 ...

  6. CentOS 7 隐藏任务栏和顶栏

    我使用的是Gnome,对于使用惯了windows的我来说,这个界面确实有点丑,但是,也将就着用了,最近发现有一款软件(Cairo-Dock)可以美化桌面,于是就安装了,但是安装之后发现了一个问题:原来 ...

  7. SpringCloud学习指南【更新】

    一. 推荐学习博客主页[更新] Spring Cloud 系列文章(纯洁的微笑,强烈推荐系列文章) Spring Cloud系列教程 (周立大大,强烈推荐) Spring Cloud入门到实战系列教程 ...

  8. 高级功能：很有用的javascript自定义事件

    之前写了篇文章<原生javascript实现类似jquery on方法的行为监听>比较浅显,能够简单的使用场景. 这里的自定义事件指的是区别javascript默认的与DOM交互的事件,比 ...

  9. LOJ#6491. zrq 学反演(莫比乌斯反演 杜教筛)

    题意 题目链接 Sol 反演套路题? 不过最后一步还是挺妙的. 套路枚举\(d\),化简可以得到 \[\sum_{T = 1}^m (\frac{M}{T})^n \sum_{d \ | T} d \ ...

  10. iphone设置fiddler代理测试

    iPhone上配置fiddler为代理方法: 打开IPhone, 找到你的网络连接,打开HTTP代理,输入Fiddler所在机器的IP地址(比如:192.168.1.104) 以及Fiddler的端口 ...