文章地址 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. HDU 1536 求解SG函数

    #include<stdio.h> #include<string.h> #include<algorithm> #include<set> using ...

  2. linux 添加文字、图形、线条、箭头的 截图

    1.deepin-screenshot 截图 软件包里搜索deepin-screenshot 支持添加文字.图形.线条.箭头的功能 2.字体发虚 Linux mint 开始菜单等字体不清晰 在软件管理 ...

  3. javascript正则表达式和字符串RegExp

    这篇文章主要介绍了javascript正则表达式和字符串RegExp and String(一)的相关资料,需要的朋友可以参考下     前言     正则表达式是javascript非常重要和常用的 ...

  4. MySQL非安装版安装

    1 数据库的打开方式(非安装版本) 1.解压mysql-5.7.12-winx64.zip到一个路径上没有空格没有汉字的目录中 2.复制my-default.ini重命名为my.ini 3.命令行进入 ...

  5. 如何在 KiCad Eeschema 原理图中高亮网络

    如何在 KiCad Eeschema 原理图中高亮网络 在 KiCad Pcbnew 中高度某个网络很方便,按着 Ctrl + 单击可以高度网络. 以为 Eeschema 也是一样的,按着 Ctrl ...

  6. Xici drop flower

    var xici_user_api = "http://www.xici.net/apps/wedding/?method=wedding.user.getusername&from ...

  7. 前端规范1-HTML规范

    HTML规范 1代码风格(参1,) 使用Tab字符(四个空格长度) 层级关系太多时尽量写在一行,但保证每行代码不宜过长  例,代码不宜过长 例,尽量写在一行 2命名(参1,) class必须使用小写, ...

  8. JavaScript--函数中（）的作用

    在函数中参数是函数的时候:function a(函数名) 与 function a(函数名()) 的区别: // 在函数里面() 是一个编组和立即执行的功能 /** * function autoPl ...

  9. MUI - sortable在mui.js前端框架不兼容的解决方案

    关于sortable看这 兼容的解决方案看这 http://www.cnblogs.com/phillyx/ 示例代码已更到github

  10. 【JZOJ1922】【Usaco 2005 NOV Gold】小行星群

    题目描述 Bessie想驾驶她的飞船穿过危险的小行星群,小行星群是一个N×N的网格(1 <= N <= 500),在网格内有K个小行星(1 <= K <= 10,000). 幸 ...