jquery判斷一個div的邊界是否超出另外一個div的邊界

jquery判斷一個div的邊界是否超出另外一個div的邊界

摘要：本文簡單介紹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);            }