文章地址 https://www.cnblogs.com/sandraryan/

需求： 写一个div，让div在父级进行匀速运动，碰到父级上下左右的边框，就向反方向运动。

碰壁反弹在游戏制作中很常用~~~~

<style>

    .wrap {

        width: 1000px;height: 500px;

        border: 1px solid red;

        margin: 40px auto;

        position: relative;

        box-sizing: border-box;

    }

    .box {

        width: 100px;height: 100px;

        background-color: green;

        position: absolute;

        top: 100px;left: 200px;

        /* border: 1px solid red; */
　　　　/* 因为父元素有border，所以，可以给子元素也加一个边框，更好的解决方式是给父元素加box-sizing: border-box;总之就是算的时候宽高符合就行了*/

    }

    </style>
<body>

    <div class="wrap">

        <div class="box"></div>

    </div>

<script>

    // 获取元素

    var wrap = document.getElementsByTagName("div")[0];

    var box = document.getElementsByTagName("div")[1]; 

    //让元素动起来

    // 添加两个变量，用于更换运动方向

    var a = 1;

    var b = 1;

    // 获取元素的可运动空间，用父元素的宽高减去子元素的宽高

    var w = wrap.offsetWidth - box.offsetWidth;

    var h = wrap.offsetHeight - box.offsetHeight;

    // console.log(w,h);

    setInterval(function(){

        // 获取元素当前left

        var  l  = box.offsetLeft;

        if(l == w || l == 0){

            // 如果到达可运动空间最大值和最小值的时候，a 变成负值

            a *= -1;

        }

        // 把元素距离左边的值每10ms加1px

        // a变成负值可以改变运动方向

        box.style.left = l + a + "px";

        // 垂直方向同水平方向

        var t = box.offsetTop;

        if(t == h || t == 0){

            b *= -1;

        }

        box.style.top = t + b + "px";

    },10); 

</script>

</body>

js实现div的碰壁反弹效果的更多相关文章

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

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

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

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

  3. 原生js实现多个随机大小颜色位置速度小球的碰壁反弹

    文章地址 https://www.cnblogs.com/sandraryan/ 需求:生成n个小球,让他们在一个大盒子中碰壁反弹,要求小球随机颜色,大小,初始位置,运动速度. 思路分析: 创建小球随 ...

  4. js中小球碰壁反弹

    一. 在指定容器内的碰壁反弹 <!DOCTYPE HTML> <html> <head> <title></title> <meta ...

  5. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  6. 原生JS、CSS实现的转盘效果（目前仅支持webkit）

    这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...

  7. js实现中文简繁切换效果

    html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  8. js鼠标滑动图片显示隐藏效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

    <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...

随机推荐

  1. js面向对象开发基础

    js的面向对象开发能力较弱,基本是以prototype为核心的面向对象,虽然现在出了个class这玩意,但本文还是先不做探讨. 面向对象基础——构造函数方法 var Fly = function (s ...

  2. SpringMVC代码复制版

    Lib目录 Java目录 HelloController文件代码 import org.springframework.web.servlet.ModelAndView; import org.spr ...

  3. 动态生成能够局部刷新的验证码【AJAX技术】---看了不懂赔你钱

    在开发JavaWeb应用时,动态生成能够局部刷新的验证码是一项必须的功能,在这里我们将会详细的讲解如何实现这一功能. 一.涉及技术 该功能需要用到AJAX异步传输技术,这样能保证在点击"看不 ...

  4. 怎么在 CentOS 6 上配置私有 NPM 仓库？

    Sinopia 是一个简单易用的私有 NPM 仓库服务器.在 CentOS 6 上安装时,遇到如下报错(Node 版本 6.9.1) #error This version of node/NAN/v ...

  5. Liferay 7 OSGi第三方jar包依赖问题

    发现遇到这个问题的人挺多的,现在跟新一下好好写. 在开发Liferay的时候,我们常常会遇到Unresolved requirement: Import-Package: {package name} ...

  6. c++进制数转换

    QString result; ]; sprintf(buffer, "0x%x", modelId); return result = buffer;

  7. PPT转PDF

    需求:可以上传ppt,前台可以预览. 在用程序将ppt转pdf的过程中,遇到几个问题,记录如下: 1.检索 COM 类工厂中 CLSID 为 {91493441-5A91-11CF-8700-00AA ...

  8. OpenCV在各版本上的安装教程

    目录 使用pip安装OpenCV 安装Python版的OpenCV 4 安装Python版的OpenCV 3 在OSX和 macOS上安装OpenCV 3 在Ubuntu上安装Python版的Open ...

  9. [已转移]IE事件流和DOM标准事件流的区别

    该文章已转移到博客:https://cynthia0329.github.io/ 1.执行的顺序不一样 冒泡型事件模型: button->div->body (IE事件流) 捕获型事件模型 ...

  10. SDUT-3347_数据结构实验之数组三：快速转置

    数据结构实验之数组三:快速转置 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 转置运算是一种最简单的矩阵运算,对于一个 ...