摘要:本文简单介绍jquery判断一个div的边界是否超出另外一个div的边界,如果超出边界做出相应的处理。

 

1、实现效果

\

判断前

\

判断后

2、实现思路

实现类似的判断,主要是获取两个div在中的上下左右的四至,在jquery中,可以通过div.offset().left和div.offset().top获取div在浏览器中的绝对位置的left和top值;div在浏览器中的绝对位置的right和bottom为div的left+width和top+height,width和height可以通过div.width()和div.height()获取。如下代码供参考:

 

            var div1 = $(#div1),div2 = $(#div2);
            var div1Width = div1.width(),
                    div2Width = div2.width(),
                    div1Height = div1.height(),
                    div2Height = div2.height(),
                    div1Left = div1.offset().left,
                    div2Left = div2.offset().left,
                    div1Top = div1.offset().top,
                    div2Top = div2.offset().top,
                    div1Right = div1Left+div1Width,
                    div2Right = div2Left+div2Width,
                    div1Bottom = div1Top+div1Height,
                    div2Bottom = div2Top+div2Height;
            if(div2Leftdiv1Right){
                console.log(右边超出);
                div2.css(right,10px);
            }
            if(div2Bottom>div1Bottom){
                console.log(下边超出);
                div2.css(bottom,10px);
            }