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(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

真正的停下来,享受自我的体验时刻,也许浮光掠影,

jquery判断一个div的边界是否超出另外一个div的边界

相关文章:

你感兴趣的文章:

标签云: