检查DIV相对于浏览器屏幕的位置 - jQuery [英] Check DIV position relative to browser screen - jQuery

问题描述

我有很多DIV有相同的类名，让保存wmplayer。我想确保当这些DIV靠近底部的浏览器，让说100px上方的底部，他们将显示：无。我如何做到这一点与jQuery？感谢

I have many DIV with the same class name, let save "wmplayer". I want to make sure that when these DIV get close to bottom of browser, let say 100px above the bottom, they will have display:none. How do I do that with jQuery? Thanks

推荐答案

我不太明白你想要什么，但我相信下面的代码会做的伎俩，或者你可以适应您的具体情况。它绑定窗口DOM对象上的resize事件，每当屏幕调整大小时，会在该类的所有div上触发自定义事件。事件检查浏览器屏幕的innserWidth / Height，使用那些值，它与div大小和位置做一些数学来完成目标。此代码检查靠近底部并靠近屏幕右侧的。如果您不想检查右侧，请删除第二个IF。

I didn't exactly understand what you want but I belive the following code will do the trick, or you can adapt to your specific scenario. It binds a resize event on the window DOM object, everytime the screen resizes it fires a custom event on all divs of that class. The event checks the innserWidth/Height of the browser screen, with those values it does some math with the div size and position to accomplish the goal. This code checks both close to the bottom and close to the right side of screen. If you don't want to check the right side, remove the the second IF.

var Constant= 100; //100 px
$(document).ready(function() {
    $(window).resize(function() {
        var x= $(window).attr("innerWidth");
        var y= $(window).attr("innerHeight");
        $("div.wmplayer").trigger("DisplayNoneEvent", [x,y]);
    });

    $("div.wmplayer").bind("DisplayNoneEvent", function(x, y) {
        var top, left, divwidth, divheight;
        top= this.css("top");
        left= this.css("left");
        divwidth= parseInt(this.css("width"));
        if (top + divwidth > x + Constant) {
            $("div.wmplayer").css({
                "display": "none"
            });
        } else {
            divheight= parseInt(this.css("height"));
            if (left + divheight > y + Constant) {
                this.css({
                    "display": "none"
                });
            }
            else {
                this.css({
                    "display": "block"
                });
            }
        }
    })
   $(window).trigger("resize"); 
   /* the previous line might not be necessary, I'm not sure. It triggers 
    the event once on pageload */
});

这只适用于带绝对位置的div，如果你想使用divs你需要相对位置得到div相对于窗口的位置，不知道该怎么做。我只能想到一个递归函数检查所有的父亲加起所有宽度/高度，直到它到达文档对象。它太丑陋，慢和bug易于代码。也许有人有一个更好的想法如何做。

This only works on divs with absolute position, if you want to use with divs with relative position you need to get the position of the div relative to the window, not sure how to do it. I can only think of a recursive function to check all parents adding up all widths/heights until it reaches the document object. It's far too ugly, slow and bug prone to code. Maybe someone has a better idea on how to do it.

注意：parseint函数在IE6和IE7（不确定IE8）上不能很好地工作，你需要首先从由this.css（width）返回的字符串的末尾手动删除px字符串。

Note: parseint function doesn't work very well on IE6 and IE7 (not sure about IE8), you need to first manually remove the 'px' string from the end of the string returned by this.css("width").

这篇关于检查DIV相对于浏览器屏幕的位置 - jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！