Question

我有这个功能，每秒增加一个div。然后它会在屏幕上移动，我希望它能在屏幕外移除div。是否可以在创建div时将这样的计时器“附加”到div？

   function deployRandom(){     
        $(".bottomEvents").append("<div class='floatingDiv'>hello world</div>")
        $(".floatingDiv").animate({ 
            marginLeft: "+=250px",
        }, 1000 );      
    }

Answer 1

主要思想是：您必须知道您的div是否超出范围（“窗外大小”）。

首先你必须知道窗口宽度：

$(window).width();

比你必须知道左边的div位置

currentDiv.position().left + currentDiv.width()

并且如果你的div超出范围，你必须隐藏它。

这里有一个小例子：https://jsfiddle.net/RomanGroovyDev/pyzuLtzd/3/

Answer 2

您可以将每个创建的div附加到数组，并使用唯一的调度程序计时器检查其位置：

var divsArray = [];

function clearOutsideDivs()
{
    var newDivsArray = [];

    for (var i=0; i<divsArray.length; ++i)
    {
        var currentDiv = divsArray[i];
        var currentDivMarginLeft = parseInt(currentDiv.css('margin-left'), 10);

        if (currentDivMarginLeft > $(window).width())
            currentDiv.remove();
        else
            newDivsArray.push(currentDiv);
    }

    divsArray = newDivsArray;
}

function deployRandom(){
    var generatedDiv = $("<div class='floatingDiv'>hello world</div>");
    $(".bottomEvents").append(generatedDiv);
    divsArray.push(generatedDiv);

    $(".floatingDiv").animate({ 
        marginLeft: "+=250px",
    }, 1000, clearOutsideDivs);   
}

jsFiddle示例here。

Jquery，如果外部屏幕宽度，删除创建的div

2 个答案: