ホームページ > 記事 > ウェブフロントエンド > 上下スクロールのアナウンス効果を実現する10行のjsコード
この記事では主に、10 行の JS コードを使用してローリング アナウンス効果を実現することに関する関連情報をサンプル コードを通じて詳しく紹介します。この記事は、すべての人の学習や仕事に一定の参考と学習価値をもたらします。必要な方は以下をフォローしてください一緒に見てみましょう。皆さんのお役に立てれば幸いです。
要件
最近のプロジェクトでは、掲示板のスクロール表示効果を次のように実現する必要があります:
解決策
1.
お知らせボード表示領域の高さ (35px) と各お知らせの高さを固定します。メッセージ (li) もこの高さである必要があります (ここでは怠惰なので行の高さを使用します)。この値は後で js で使用されます。 <p class="notice">
<ul>
<li>第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告</li>
<li>第2条公告第2条公告第2条公告第2条公告第2条公告第2条公告</li>
<li>第3条公告第3条公告第3条公告第3条公告第3条公告第3条公告</li>
<li>第4条公告第4条公告第4条公告第4条公告第4条公告第4条公告</li>
</ul>
</p>
関数noticeUp.js
1. animate コールバック関数 animate 関数の実行 完了後に実行される関数。
p,ul,li{margin: 0;padding: 0}/*先初始化一下默认样式*/ .notice { width: 300px;/*单行显示,超出隐藏*/ height: 35px;/*固定公告栏显示区域的高度*/ padding: 0 30px; background-color: #b3effe; overflow: hidden; } .notice ul li { list-style: none; line-height: 35px; /*以下为了单行显示,超出隐藏*/ display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
まず、jQuery ライブラリと独自のカプセル化プラグインを導入します
/* * 参数说明 * obj : 动画的节点,本例中是ul * top : 动画的高度,本例中是-35px;注意向上滚动是负数 * time : 动画的速度,即完成动画所用时间,本例中是500毫秒,即marginTop从0到-35px耗时500毫秒 * function : 回调函数,每次动画完成,marginTop归零,并把此时第一条信息添加到列表最后; * */ function noticeUp(obj,top,time) { $(obj).animate({ marginTop: top }, time, function () { $(this).css({marginTop:"0"}).find(":first").appendTo(this); }) }
関連する推奨事項:
jQueryアニメーションと特殊効果の詳細な説明JavaScriptは選択したボックスの特殊効果の生成を実現します
以上が上下スクロールのアナウンス効果を実現する10行のjsコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。