2017-04-14 16 views
-1

我想做一個像flickr網站登錄頁面。我試圖瞭解他們是如何設計的,結論是他們創建了一個div自動滾動。我的問題是如何在頁面加載時使div自動滾動。如果還有其他方法可以實現相同的設計,那麼分享。如何使一個自動滾動像flickr主頁

回答

-1

我不知道是什麼Flickr是但這是sitepoint的自動滾動DIV curtesy:https://www.sitepoint.com/community/t/auto-scrolling-a-div-with-overflow-scroll-auto/2291我想這將是很容易彎曲這對你在找什麼,使其水平等

<body> 
 
<div id="ecran" style='overflow:auto;width:200px;height:200px;border:solid 1px green;'> 
 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 

 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 

 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 

 
</div> 
 

 
\t 
 
<script type='text/javascript'> 
 
function ScrollDiv(){ 
 

 
    if(document.getElementById('ecran').scrollTop<(document.getElementById('ecran').scrollHeight-document.getElementById('ecran').offsetHeight)){-1 
 
     document.getElementById('ecran').scrollTop=document.getElementById('ecran').scrollTop+1 
 
     } 
 
    else {document.getElementById('ecran').scrollTop=0;} 
 
} 
 

 
setInterval(ScrollDiv,50) 
 
</script> 
 
</body>

+0

謝謝。你能否用jquery寫這段代碼?所以它變得容易理解。我感謝您的幫助。 – Alex