文章地址 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. SASS：sass语法参照列表及教程

    http://sass-lang.com/documentation/file.SASS_REFERENCE.html 保存一下,上面的链接包括了scss中所有语法规则. 转载自:http://www ...

  2. web前端学习（四）JavaScript学习笔记部分（5）-- 事件流详解

    1.JS事件详解-事件流 1.1.事件流 1.事件流: 描述的是在页面中接受事件的顺序 2.事件冒泡: 由最具体的元素接收,然后逐级上传播至最不具体的节点(文档) 3.事件捕获: 最不具体的节点先接收 ...

  3. laravel之文件上传

    laravel框架中的文件上传我们应该如何实现此功能呢? 之前也是没有使用过laravel的文件上传功能,后来在网上找到一些教程,五花八门.让我看起来有点头疼. 有时候找到测试浪费好长时间最后还是出不 ...

  4. MSSQL 为db创建user

    use [IBatisNet]GO if not exists (select * from master.dbo.syslogins where loginname = N'IBatisNet')B ...

  5. jquery 浏览器缓存网页

    头部:<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate&q ...

  6. Java版阿里云通信短信发送API接口实例（新）

    阿里云通信(原名阿里大于)的短信服务(Short Message Service)是阿里云为用户提供的一种通信服务的能力,支持快速发送短信验证码.短信通知等. 完美支撑双11期间2亿用户,发送6亿短信 ...

  7. Cmakelists.txt中配置glew

    在cmakelists.txt中添加: add_library(glew_static STATIC IMPORTED) set_target_properties(glew_static PROPE ...

  8. aspcms安装所遇到的问题

     aspcms标签:http://biaoqian.iasp.com.cn/ 1.报错:An error occurred on the server when processing the URL. ...

  9. shell学习（17）- shell中2>&1的解释及输入输出重定向

    大多数 UNIX 系统命令从你的终端接受输入并将所产生的输出发送回​​到您的终端.一个命令通常从一个叫标准输入的地方读取输入,默认情况下,这恰好是你的终端.同样,一个命令通常将其输出写入到标准输出,默 ...

  10. HTTP参考

    HTTP参考 一.HTTP码应码响应码由三位十进制数字组成,它们出现在由HTTP服务器发送的响应的第一行. 响应码分五种类型,由它们的第一位数字表示: 1.1xx:信息,请求收到,继续处理 2.2xx ...