检测何时html元素退出屏幕

Question

我有一个大帐篷。 （标签＆lt; marquee＆gt;）。我希望当第一个元素（span class＆＃34; span1＆＃34;）在屏幕上停止显示时，请通知我。

http://jsfiddle.net/5o4ez17s/

    <div id='container_marquee'>
     <marquee id='mymarquee' behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();">
               <span class='span1'>first marquee text</span>
               <span class='span2'>second marquee text</span>
               <span class='span3'>third marquee text</span>
               <span class='span4'>fourth marquee text</span>
               <span class='span5'>fifth marquee text</span>
     </marquee>
    </div>

例如..：

alert("the first span is not visible on screen");

我不希望有一个设定的间隔或某事，也许有一种更有效的方法来做到这一点。也许你可以将听力事件或其他事情联系起来。

Answer 1

您可以计时并在滴答结束时提醒用户。

    var ticks = 0;
    var timeformarquee = 24; //how long it takes for marquee to hit the edge (seconds)
    var clock = function(){
      ticks++;
      if(ticks === timeformarquee){
       alert("The first span isn't visible on the screen");
      }
    };
    window.setInterval(clock, 1000);

Answer 2

@yavg，我认为setInterval()是根据您的要求跟踪选框效果的唯一方法：

尝试使用以下脚本并相应地修改它：

$(function(){
    setInterval(function(){
        var spanWidth = $(".span1").width();
        /*console.log($(".span1").offset().left);
        console.log($(window).width());*/
        if($(".span1").offset().left >= -spanWidth){
            console.log('Visible');
        }else{
            console.log('Not Visible');
        }
    },1000);
})

希望它会对你有所帮助。