jquery単一行テキストのスクロールアップ効果exam​​ple_jquery

コードをコピー コードは次のとおりです。

断続的にスクロールするテキストを見てください

🎜>

• CCTV 315 暴露:チャイナリソースは「ハイシャゲート」に深く関与しており、その対応は明らかだが明確ではない
  
• 食器を消毒しなかったとして摘発、波司登などのカシミヤセーターにはカシミヤが含まれていなかった
  
• 無錫警察は「」事件を発表した。妊娠中の女性警察官に予期せぬ不幸が起きる」


• 中国の一日: 最後のフェリーのビジョン: 自宅で「やり遂げる」

">

コードをコピー コードは次のとおりです:

.infolist{width:400px;matgin :0;}

.infolist ul{margin:0;padding:0;}
.infolist ul li{list -style:none;height:26px;line-height:26px;}
.infocontent {width:400px;height:26px;overflow:hidden;border:1px Solid #666666;}

コードをコピー コードは次のとおりです:

var interval=1000;//間の時間間隔2 つのスクロール

var stepsize=26;//スクロール時に行が改行されないように、1 つのスクロールの長さは行の高さの倍数でなければなりません
var

$(document)。 ready( function(){
//下の部分を上の部分で埋める
$ ("#bottom").html($("#top").html());

//マウスイベントを表示領域にバインドします
$("#content").bind ("mouseover",function(){StopScroll();});
$("#content").bind ("mouseout",function(){StartScroll();});

//タイマーを開始します
StartScroll()
});タイマーをクリアしてスクロールを開始します
function StartScroll(){
objInterval=setInterval("verticalloop( )",interval);
}

//タイマーをクリアしてスクロールを停止します
関数StopScroll(){
window.clearInterval(objInterval);
}

//スクロールを制御
functionverticalloop(){
//すべての上部コンテンツが移動したかどうかを判断します表示領域の
//そうである場合は、最初から開始します。そうでない場合は、上に移動し続けます
if($( "#content").scrollTop()>=$("#top").outerHeight ()){
$("#content").scrollTop($("#content").scrollTop()- $("#top").outerHeight());
}
/ /jquery を使用してスクロール時のアニメーション効果を作成します
$("#content").animate(
{"scrollTop" : $("#content").scrollTop() stepsize "px"},600,function (){
//スクロールエリアのscrollTopを表示するために使用します。実際のアプリケーションでは
// $( "#foot").html("scrollTop:" $("#content)を削除してください。 ").scrollTop());
});
}