jquery插件——检测DOM元素是否在浏览器可视范围之内

引言

web应用中有很多地方会用到打点，用来检测用户行为，今天就做了个打点相关的需求，为了统计一个广告给用户的展示次数，每次用户请求完成并且渲染完成之后就算一次成功的展示，其实有时候这个广告还没有在用户的可视范围之内，用户需要滑动滚动条才能看见，但已经算了一次成功展示了，显然这里不太合理，这里做了个检测元素是否在可视范围之内的小插件。

验证可行性

为了实现这个，我首先想到的就是碰撞检测，把浏览的页面的宽度作为

水平坐标

，页面的高度作为

垂直的坐标

，页面中的一个元素看做一个

矩形物体a

，固定在坐标系中，浏览器可视区域看做另一个

矩形物体b

，水平和垂直的滚动条滚动事件看作是

矩形物体b

在移动，当

矩形物体a

出现在可视区域的时候其实就可以抽象为

矩形物体a

和

矩形物体b

发生了碰撞。

有了这个思路，剩下的就是获取抽象矩形的坐标了，一对左上角和右下角的坐标确定唯一一个矩形，元素矩形的坐标可以这样获得：

var src_begin_left = $("#src").offset().left,
src_begin_top = $("#src").offset().top,
src_end_left = src_begin_left + $("#src").width(),
src_end_top = src_begin_top + $("#src").height();

同样窗体矩形的位置也可以这么确定：

var win_begin_left = $(window).scrollLeft(),
win_begin_top = $(window).scrollTop(),
win_end_left = win_begin_left + $(window).width(),
win_end_top = win_begin_top + $(window).height();

实现碰撞检测，碰撞检测这个思路之前有看过，所以这次一下子就想到这个了，但具体的实现忘了，自己写了好久发现好麻烦，后来查了资料，想起来了，碰撞检测中碰撞的情况有好多，未碰撞的情况就比较少了只有四种（固定一个矩形，另一个矩形在固定矩形的上下左右的时候、最靠近的边缘未发生碰撞才未发生碰撞，所有的情况都可以归类到这种情况的一种），排除了未碰撞的情况，剩下的就是碰撞。

代码

(function($){
$.extend({
//矩形的碰撞检测
/**
* x1,y1 第一个矩形的左上角
* x2,y2 第一个矩形的右下角
* x3,y3 第二个矩形的左上角
* x4,y4 第二个矩形的右下角
*
* return Boolean true=>碰撞
*/
isCollsion: function(x1, y1, x2, y2, x3, y3, x4, y4){
if(
(x1 > x3 && x1 > x4) ||
(x3 > x1 && x3 > x2) ||
(y1 > y3 && y1 > y4) ||
(y3 > y1 && y3 > y2)
){
return false;
}else{
return true;
}
}
});

/**
* opt中包含了两个参数，元素实际位置的偏移
*
* return Boolean 是否在可视范围之内
*/
$.fn.isVisable = function(opt){
opt = $.extend({
offsetTop: 0, //网页中元素比实际位置在垂直方向的偏移
offsetLeft: 0, //网页中元素比实际位置在水平方向的偏移
addTop: 0, //元素左上角坐标y轴偏移
addRight: 0, //元素右下角坐标x轴偏移
addBottom: 0, //元素右下角坐标y轴偏移
addLeft: 0, //元素左上角坐标x轴偏移
}, opt);
var me = $(this),
srcInfo = {
begin_left: (me.offset().left + opt.offsetLeft + opt.addLeft),
begin_top: (me.offset().top + opt.offsetTop + opt.addTop)
}
srcInfo.end_left = (srcInfo.begin_left + me.width() + opt.addRight);
srcInfo.end_top = (srcInfo.begin_top + me.height() + opt.addBottom);

winInfo = {
begin_left: $(window).scrollLeft(),
begin_top: $(window).scrollTop()
}
winInfo.end_left = (winInfo.begin_left + $(window).width());
winInfo.end_top = (winInfo.begin_top + $(window).height());

//检测是否”碰撞“”
return $.isCollsion(
srcInfo.begin_left, srcInfo.begin_top, srcInfo.end_left, srcInfo.end_top,
winInfo.begin_left, winInfo.begin_top, winInfo.end_left, winInfo.end_top
);
}
})($);

有了这个就可以测试下了，随便选一个网站，就看百度首页，用chrome打开，按下F12，运行上面代码，然后随便算一个元素进行测试。



jquery对IE支持的很好了



=========================================

更新线，想了下，有了偏移还是不够，还有可能会加上缩小放大。

下面这张图是偏移的示意图：



下面这张是尺寸变化的示意图：