jQueryはリストの自動スクロールを実装して、loop_jqueryにニュースを表示する

ニュース (お知らせ、イベント、写真など) は、ページ上の小さな領域に円形スクロールで表示する必要があります。また、マウスをホバリングするとスクロールが停止してプロンプトが表示され、その後スクロールが続行される必要があります。出発します。

レンダリング:

乾いたものはこちら

html:

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

• aaaaaaaaaaaaaaaa


• bbbbbbbbbbbbbb


• cccccccccccccccc


• ddddddddddddddd


• eeeeeeeeeeee


• fffffffffffffff


• gggggggggggggg

css:

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

ウイ、リ {
リストスタイル: なし;
}
#ニュース{
高さ: 75px;
オーバーフロー: 非表示;
}

キーは js ファイルです:

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

$(function() {
var $this = $("#news");
varscrollTimer;
$this.hover(function() {
clearInterval(scrollTimer);
}、関数() {
スクロールタイマー = setInterval(function() {
スクロールニュース($this);
}、2000);
}).trigger("mouseleave");

関数scrollNews(obj) {
var $self = obj.find("ul");
var lineHeight = $self.find("li:first").height(); $self.animate({
"marginTop": -lineHeight "px"
}, 600, function() {
$self.css({
マージントップ: 0
}).find("li:first").appendTo($self);
})
}
})

主なことは、hover、setInterval、clearInterval、animate メソッド、および marginTop 属性 (marginLeft、top、left など) を理解して使用することです。 .trigger("mouseleave") を追加しないと、 Web ページが初期化されるとき、リストはスクロールせず、appendTo は要素を直接移動できます。それだけです。