基於JS實現新聞列表無縫向上滾動實例代碼_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

基於JS實現新聞列表無縫向上滾動實例代碼_javascript技巧

May 16, 2016 pm 03:18 PM

當新聞較多，並且空前有限的時候，使用滾動是一個不錯的選擇，本章節就透過程式碼實例介紹一下如何實現此效果。

程式碼實例如下:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="author" content="http://www.jb51.net/" /&gt;
&lt;title&gt;文字列表无缝向上滚动代码&lt;/title&gt;
&lt;style type="text/css"&gt;
*{
margin:0px;
padding:0px;
border:0px;
}
body{font-size:12px}
#demo{
overflow:hidden;
height:80px;
width:280px;
margin:90px auto;
position:relative;
}
#demo1{
height:auto;
text-align:left;
}
#demo2{
height:auto;
text-align:left;
}
#demo1 li{
list-style-type:none;
height:22px;
text-align:left;
text-indent:15px;
}
#demo2 li{
list-style-type:none;
height:22px;
text-align:left;
text-indent:15px;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt; 
var speed=40 
window.onload=function(){
var demo=document.getElementById("demo"); 
var demo2=document.getElementById("demo2"); 
var demo1=document.getElementById("demo1"); 
demo2.innerHTML=demo1.innerHTML 
function Marquee(){ 
if(demo.scrollTop&gt;=demo1.offsetHeight){
demo.scrollTop=0; 
}
else{ 
demo.scrollTop=demo.scrollTop+1;
} 
} 
var MyMar=setInterval(Marquee,speed) 
demo.onmouseover=function(){clearInterval(MyMar)} 
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)} 
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="demo"&gt;
&lt;ul id="demo1"&gt;
&lt;li&gt;&lt;a href="#" target="_blank"&gt;脚本之家欢迎您的到来&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" target="_blank"&gt;只有努力才会有美好的明天&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" target="_blank"&gt;没有人一开始就是高手，都是从菜鸟开始&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" target="_blank"&gt;每一天都是新的需要好好珍惜&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" target="_blank"&gt;怨天尤人是没有任何作用的&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" target="_blank"&gt;今天你写代码了吗&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" target="_blank"&gt;分享的胸怀和互助的精神最终成就了你&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div id="demo2"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

登入後複製

以上程式碼實現了新聞列表滾動效果，以下介紹一下實現過程:

一.實現原理:

大致原理如下，demo元素中有兩個子元素demo1和demo2，並且將demo1中的內容存入demo2中，之所以這樣做，是為了當向上滾動的時候，demo2能夠接在demo1的後面，否則將不是無縫滾動，而是有縫滾動了，當demo1的內容完全被遮擋之後，也就是demo1完全滾動上去的時候，demo2會恰好位於demo1開始滾動的位置，然後再重新設定demo的scrollTop值，讓滾動就重新來過，這樣就實現了無縫滾動效果。

基於JS實現新聞列表無縫向上滾動實例代碼就給大家介紹到這裡，希望大家根據自己的實際需求應用此段代碼。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn