當元素不在屏幕上時？

在我的網站中，有一個向右滾動的浮動雲（元素），我希望能夠告訴它何時在屏幕上不再可見。當元素不在屏幕上時？

我該怎麼辦？

setInterval(function(){ 
    if(!jQuery('.sa_cloud_l').is(':visible')){ 
     alert('not visible anymore'); 
    }else{   
     c1.css('left', '+=21'); 
    } 
},100);

來源

2012-10-03 user1091856

定義什麼是「不再可見」？ – zerkms

比較它的左邊位置和窗口的寬度。 –

:visible選擇器不考慮在瀏覽器的視口內。如果他們消耗的文件空間

http://api.jquery.com/visible-selector/

元素被認爲是可見的。可見元素的寬度或高度大於零。

具有可見性的元素：hidden或opacity：0被視爲可見，，因爲它們仍佔用佈局中的空間。在隱藏元素的動畫期間，元素被視爲可見，直到動畫結束。在動畫中顯示一個元素時，該元素被認爲在動畫的開始處可見，爲。

來源

2012-10-03 20:46:30 Aknosis

檢查jquery插件視口http://www.appelsiini.net/projects/viewport

來源

2012-10-03 20:46:34 jcubic

可能是最好的方法，所有事情都考慮在內。這是一個發展良好的插件。 – Blazemonger

if ($(window).scrollLeft() <= $(this).offset().left 
    && $(this).offset().left < $(window).width()+$(window).scrollLeft() 
    && $(window).scrollTop() <= $(this).offset().top 
    && $(this).offset().top < $(window).height()+$(window).scrollTop()) { 
    // at least part of 'this' is within the window 
}

來源

2012-10-03 20:46:39 Blazemonger

:visible僅選擇其CSS 顯示性質不none的元素。您可以使用offset()方法。

var width = $(window).width(); 

setInterval(function(){ 
     if ($('.sa_cloud_l').offset().left > width) { 
      alert('not visible anymore'); 
     } else {   
      c1.css('left', '+=21'); 
     } 
},100);

來源

2012-10-03 20:47:48 undefined

當元素不在屏幕上時？

回答

相關問題