ページ上のニュースを断続的にシームレスにスクロールする場合、最も一般的な方法は、スクロール領域のコンテンツをコピーして追加し、スクロール ブロックのスクロールトップを制御および判断してスクロール停止効果を実現することです。
実際、多くの場合、ノード操作を通じて断続的なシームレスなスクロールを実現する方が簡単です。
コードは次のとおりです。
<script language="javascript" type="text/javascript">
window.onload=function(){
var o=document.getElementById('box');
window.setInterval(function(){scrollup(o,24,0);},3000);
}
///スクロールメインメソッド
///パラメータ:o スクロール ブロック オブジェクト
///パラメータ: d 各スクロールの高さ
///パラメータ: c 現在のスクロールの高さ
関数スクロールアップ(o,d,c){
if(d==c){
var t=getFirstChild(o.firstChild).cloneNode(true);
o.removeChild(getFirstChild(o.firstChild));
o.appendChild(t);
t.style.marginTop="0px";
}それ以外{
c+=2;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(function(){scrollup(o,d,c)},20);
}
}
//Firefox でスペースとキャリッジリターンがノードとして使用される問題を解決
関数 getFirstChild(node){
while (node.nodeType!=1)
{
ノード=ノード.次の兄弟;
}
リターンノード;
}
</script>
<ul id="ボックス">
<li>・新華日報: 音楽著作権料は「麻の玉」のようなもの </li>
<li>・現代特急: 人間はロボットと結婚して子供を産むことができますか? </li>
<li>・世界: アメリカ、億万長者クラブの破産</li>
<li>・現代特急: 倪鎮をメディアから黙らせるために、彼は李嘉信へのラブレターを売ろうとした</li>
<li>・北京タイムズ: 北京航空航天大学の学生の自作ロケットが空に上昇</li>
</ul>
効果：
コードを実行する
<style type="text/css">
<!--
*{マージン:0px;}
#ボックス{幅:300ピクセル;高さ:24ピクセル;フォントサイズ:12ピクセル;}
#box li{ リストスタイル: なし; }
-->
</スタイル>
<script language="javascript" type="text/javascript">
window.onload=function(){
var o=document.getElementById('box');
window.setInterval(function(){scrollup(o,24,0);},3000);
}
関数スクロールアップ(o,d,c){
if(d==c){
var t=getFirstChild(o.firstChild).cloneNode(true);
o.removeChild(getFirstChild(o.firstChild));
o.appendChild(t);
t.style.marginTop="0px";
}それ以外{
c+=2;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(function(){scrollup(o,d,c)},20);
}
}
関数 getFirstChild(node){
while (node.nodeType!=1)
{
ノード=ノード.次の兄弟;
}
リターンノード;
}
</script>
<ul id="ボックス">
<li>・新華日報: 音楽著作権料は「麻の玉」のようなもの </li>
<li>・現代特急: 人間はロボットと結婚して子供を産むことができますか? </li>
<li>・世界: アメリカ、億万長者クラブの破産</li>
<li>・現代特急: 倪鎮をメディアから黙らせるために、彼は李嘉信へのラブレターを売ろうとした</li>
<li>・北京タイムズ: 北京航空航天大学の学生の自作ロケットが空に上昇</li>
</ul>