如何顯示在瀏覽器滾動的div

我的頁面佈局有幾個組的div重複像如何顯示在瀏覽器滾動的div

<div--1> 

    <div--2> 

    <div--3> 

     <div--4>

t這結構重複了幾次。我想隱藏div-4的內容以隱藏，直到用戶滾動到該元素。我們如何實現這一功能？

我發現有這樣的（http://www.appelsiini.net/projects/lazyload）圖像

來源

2010-09-08 edava

此代碼將顯示和隱藏基於鼠標位置的div工作的插件。不知道如何檢測特定的div是否在屏幕上。

<html> 
<head> 
<title>Show/Hide Divs</title> 
<script type="text/javascript"> 
function showMyContents(control) 
{ 
control.children["myContents"].style.display = 'inline'; 
} 

function hideMyContents(control) 
{ 
control.children["myContents"].style.display = 'none'; 
} 
</script> 
</head> 
<body> 

<div onmouseover="showMyContents(this);" onmouseout="hideMyContents(this);">show 1 
<div style="display:none" id="myContents">My Contents1</div> 
</div> 
<div onmouseover="showMyContents(this);" onmouseout="hideMyContents(this);">show 2 
<div style="display:none" id="myContents">My Contents2</div> 
</div> 
<div onmouseover="showMyContents(this);" onmouseout="hideMyContents(this);">show 3 
<div style="display:none" id="myContents">My Contents3</div> 
</div> 

</body> 
</html>

來源

2010-09-08 19:29:33

感謝克里斯的代碼！任何人都可以通過瀏覽器滾動來幫助我展示div。當頁面只加載頁面可見部分的div（div4）時，初始化顯示。以便頁面加載更快 – edava 2010-09-13 19:34:28

如何顯示在瀏覽器滾動的div

回答

相關問題