在做廣東省互聯(lián)網(wǎng)協(xié)會官網(wǎng)時,產(chǎn)品經(jīng)理要求實現(xiàn)這樣一個需求:有一首會長寫的小詩,希望在首頁的一個區(qū)域內(nèi),無限輪播這首詩。

輪播小詩
頁面結(jié)構(gòu)
<div class="poem-Box">
<div class="poem-bg"></div>
<div id="poemCon" class="poemCon">
<div id="con1" class="con1">
<p>這里是五彩繽紛、群芳爭妍的世界!</p>
<p>這里是e光譜照、人潮似海的網(wǎng)絡(luò)愛好者的樂園!</p>
<p>一切網(wǎng)絡(luò)經(jīng)濟的困惑將在這里煙消云散,豁然開朗;</p>
<p>一切陳舊的企業(yè)經(jīng)營觀念將在這里被網(wǎng)絡(luò)新潮濯滌殆盡。</p>
<p>應(yīng)該摒棄的,從此摒棄!</p>
<p>早該到來的,正在到來!</p>
<p>在這"科技無限、網(wǎng)絡(luò)無界"的時空中遨游:</p>
<p>你將認(rèn)知和被認(rèn)知,你將熟識和被熟識。</p>
<p>她是Internet精英翱翔之天宇,</p>
<p>是網(wǎng)絡(luò)新人摘桂之階梯;</p>
<p>她不僅打上了千百萬網(wǎng)民悠纏之情結(jié),</p>
<p>她更為商海卓識者醞釀著無限商機!</p>
</div>
<div id="con2" class="con2"></div>
</div>
</div>
原生JS部分
var area = document.getElementById('poemCon');
area.scrollTop = 0;
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
con2.innerHTML = con1.innerHTML;
function scrollUp () {
if ( area.scrollTop >= con1.offsetHeight ) {
area.scrollTop = 0;
}else{
area.scrollTop ++;
}
}
var timer=setInterval(scrollUp,50);
area.onmouseover = function () {
clearInterval (timer);
}
area.onmouseout=function(){
timer=setInterval (scrollUp , 50);
}
關(guān)鍵點為: 復(fù)制一份小詩內(nèi)容到con2, 以及scrollTop 與 offsetHeight。