文章地址 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. QT_强杀进程

    #ifdef WIN32 bool res = false; HANDLE hToolHelp32Snapshot; hToolHelp32Snapshot = CreateToolhelp32Sna ...

  2. map.(parseInt)方法详解

    偶然间碰到这样一个问题: ["1","2", "3"].map(parseInt) //[ 1, NaN, NaN ] 运行结果 [ 1, ...

  3. selenium(4):初次尝试，通过百度进行搜索

    实现场景:打开chrome浏览器后,打开百度,再搜索栏里输入‘测试’,点击搜索按钮. 代码:定位方式,通过元素的ID. 定位技巧: ①鼠标定位需要定位的输入框,鼠标右键单击.选择检查. ②即可轻松的查 ...

  4. WebWork（在主线程创建子进程）

    WebWork浅谈 前言: 都知道JS是单线程语言,最让人头疼的莫过于在网络正常的情况下经常出现页面的假死, 以及在进行大量的for循环计算时会导致线程阻塞,由于要进行大量的计算JS后面的运行会被阻隔 ...

  5. Vue项目根据不同运行环境打包项目

    前提 项目是直接通过 vue-cli脚手架 生成的: 假设在项目开发中,分为三个环境 -- · 测试环境· 预生产环境· 生产环境 每个环境的接口地址都是不同的,而 vue-cli 给出的环境只有 d ...

  6. BZOJ1076奖励关题解

    链接 很容易想到状压,f[i][s]表示前i个选择的箱子集合为s的最大期望 果断wa了,因为有一些不合法的状态,譬如f[1][1111001]这样的状态 这样的状态不好排除,所以改用倒推 用f[i][ ...

  7. php rmdir使用递归函数删除非空目录的方法

    php rmdir()函数 rmdir ― 删除空目录 语法: bool rmdir ( string $dirname [, resource $context ] )尝试删除 dirname 所指 ...

  8. Nginx教程(7) 正向代理与反向代理【总结】 （转）

    1.前言 最近工作中用到反向代理,发现网络代理的玩法还真不少,网络背后有很多需要去学习.而在此之前仅仅使用了过代理软件,曾经为了访问google,使用了代理软件,需要在浏览器中配置代理的地址.我只知道 ...

  9. No.3 Verilog 语言要素

    - 标识符 任意字母.数字."$"和"_"组成,标识符第一个不能是数字. - 注释 ()/*可扩展多行*/ ()//本行结束 - 系统函数 以$字符开始的标识符 ...

  10. FastAdmin 自学教程 - 目录（持续更新）（2019-10-11）

    FastAdmin 自学教程 - 目录 本自学教程将不定期更新. 了解 FastAdmin FastAdmin 开发第 1 天:了解 FastAdmin 框架 FastAdmin 开发第 2 天:安装 ...