jQuery はリストの自動循環スクロールを実装し、マウスがホバリングしているときにスクロールを停止します_jquery

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

レンダリング:

役立つ情報をアップロードします
html:

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

aaaaaaaaaaaaaa

bbbbbbbbbbbbbb

cccccccccccccc

eeeeeeeeeeeee

ffffffffffffffff

コードをコピー

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

ui,li { list-style: none; # news{ 高さ: 75px; オーバーフロー: 非表示

}

キーは js ファイルです:




コードをコピー

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

$(function() { var $this = $("#news"); varscrollTimer; $this.hover( function() { clearInterval(scrollTimer); }, function() {

scrollTimer = setInterval(function() {

scrollNews($) this);
}, 2000);
}).trigger("mouseleave");

functionscrollNews(obj) {
var $self = obj.find("ul") );
var lineHeight = $self.find ("li:first").height();
$self.animate({
"marginTop": -lineHeight "px"
}, 600、function() {
$self.css({
marginTop: 0
}).find("li:first").appendTo($self)
}
})


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