文章地址 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. Django用户登陆以及跳转后台管理页面1

    """S14Djngo URL Configuration The `urlpatterns` list routes URLs to views. For more i ...

  2. 数据库通过sql备份脚本恢复时，报错误The user specified as a definer ('root'@'%') does not exist

    数据库通过sql备份脚本恢复时,报错误The user specified as a definer ('root'@'%') does not exist 当出现这个错误,意思是某个数据库对象的定义 ...

  3. Hdu 2389 二分匹配

    题目链接 Rain on your Parade Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 655350/165535 K (Ja ...

  4. DirectX11笔记(十二)--Direct3D渲染8--EFFECTS

    原文:DirectX11笔记(十二)--Direct3D渲染8--EFFECTS 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010333737 ...

  5. day38 12-Spring的Bean的属性的注入：名称空间p

    xmlns="http://www.springframework.org/schema/beans"是默认的名称空间. xmlns:xsi="http://www.w3 ...

  6. 洛谷P1541 乌龟棋 [2010NOIP提高组]

    P1541 乌龟棋 题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点,游戏要求玩家 ...

  7. 深入浅出Cocoa之消息（二）-详解动态方法决议(Dynamic Method Resolution) 【转】

    序言 如果我们在 Objective C 中向一个对象发送它无法处理的消息,会出现什么情况呢?根据前文<深入浅出Cocoa之消息>的介绍,我们知道发送消息是通过 objc_send(id, ...

  8. 【JZOJ4782】【NOIP2016提高A组模拟9.15】Math

    题目描述 输入 输出 样例输入 3 5 样例输出 -1 数据范围 解法 观察式子,可以得知整个式子与d(i*j)的奇偶性有关. d(n)为奇数当且仅当n是完全平方数. 对于一个i,如果d(i*j) ( ...

  9. 什么是PV UV

    PV是网站分析的一个术语,用以衡量网站用户访问的网页的数量.对于广告主,PV值可预期它可以带来多少广告收入.一般来说,PV与来访者的数量成正比,但是PV并不直接决定页面的真实来访者数量,如同一个来访者 ...

  10. 用var 变量=函数名 方式调用函数时如何传值的问题

    通过:xmlhttp.onreadystatechange= function(){FuncName(param)};orxmlhttp.onreadystatechange= new Functio ...