摘要:本文简单介绍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