九宫格碰撞

getClientRects()方法
返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合。DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

相关代码：
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                position: absolute;
                width: 100px;
                height: 100px;
                background-color: yellowgreen;
                z-index: 2;

            }
            #wrap{
                position: absolute;
                top: 200px;
                left: 400px;
                width: 300px;
                height: 200px;
                background-image: url(img/b.jpg);
                background-repeat: no-repeat;
                background-size: 100% 100%;

            }
        </style>
    </head>

    <body>
        <div id="box"></div>
        <div id="wrap"></div>
    </body>
    <script type="text/javascript">
        var box=document.getElementById('box');
        var wrap=document.getElementById('wrap');

        var eleP={left:0,top:0};
        var mouseS={left:0,top:0};

        box.οnmοusedοwn=function (event) {
            eleP.top=box.offsetTop;
            eleP.left=box.offsetLeft;

            mouseS.top=event.clientY;
            mouseS.left=event.clientX;

            document.οnmοusemοve=function (event) {

                var mouseE={left:0,top:0};
                mouseE.top=event.clientY;
                mouseE.left=event.clientX;

                var disX=mouseE.left-mouseS.left;
                var disY=mouseE.top-mouseS.top;

                var top=disY+eleP.top;
                var left=disX+eleP.left;

                var leftM=document.documentElement.clientWidth-box.offsetWidth;
                var topM=document.documentElement.clientHeight-box.offsetHeight;
                if(top<0){
                    top=0;
                }else if(top>topM){
                    top=topM;
                }
                if(left<0){
                    left=0;
                }else if(left>leftM){
                    left=leftM;
                }
                box.style.left=left+'px';
                box.style.top=top+'px';


                var T1=box.getBoundingClientRect().top;
                var L1=box.getBoundingClientRect().left;
                var R1=box.getBoundingClientRect().right;
                var B1=box.getBoundingClientRect().bottom;

                var T2=wrap.getBoundingClientRect().top;
                var L2=wrap.getBoundingClientRect().left;
                var R2=wrap.getBoundingClientRect().right;
                var B2=wrap.getBoundingClientRect().bottom;

                if( R1<L2 || B1<T2 || R2<L1 || B2<T1){
                    wrap.style.backgroundImage='url(img/b.jpg)';
                }else {
                    wrap.style.backgroundImage='url(img/a.jpg)';
                }

            };
            document.οnmοuseup=function () {
                document.οnmοusemοve=document.οnmοuseup=null;
            }
            return false;
        };
    </script>
    </html>

来源：CSDN

作者：gzlxing

链接：https://blog.csdn.net/qq_40238154/article/details/78738393

标签

var

html5

top

HTML5 移动端 实现九宫格碰撞

九宫格碰撞

HTML5 移动端实现九宫格碰撞