摘要:本文簡單介紹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(div2Left<div1Left){console.log("左邊超出");div2.css("left","10px");}if(div2Top<div1Top){console.log("上邊超出");div2.css("top","10px");}if(div2Right>div1Right){console.log("右邊超出");div2.css("right","10px");}if(div2Bottom>div1Bottom){console.log("下邊超出");div2.css("bottom","10px");}
如有疑問請聯系:
QQ:1004740957
Email:niujp08@qq.com