コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryはリストの自動スクロールを実装して、loop_jqueryにニュースを表示する

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

WBOY
リリース： 2016-05-16 16:38:54
オリジナル
1954 人が閲覧しました

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

レンダリング:

乾いたものはこちら

html:

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

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 は要素を直接移動できます。それだけです。
関連ラベル：
スクロール周期 自動スクロール
ソース：php.cn
前の記事：jQuery はデータを非同期的にロードし、イベントを追加します。 次の記事：Jquery は JSON string_jquery から JSON オブジェクトを作成します
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
PX から REM への自動変換エラー <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...
から 2024-04-16 09:34:16
0
0
4687
width プロパティを追加してコンテンツを左に移動します。 ボディに余白を設けました。 main {left margin: 200px; right margin: 200px; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート