ホームページ ウェブフロントエンド jsチュートリアル jQuery_jquery に基づくシームレスなスクロール アプリケーション (単一行または複数行)

jQuery_jquery に基づくシームレスなスクロール アプリケーション (単一行または複数行)

May 16, 2016 pm 06:21 PM
シームレスなスクロール

コア jQuery コード:

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

$(function() {
var _wrap=$('ul.line');//スクロール領域を定義します
var _interval=2000;//スクロールのギャップ時間を定義します
var _moving;//必要なアニメーションClear
_wrap.hover (function(){
clearInterval(_moving);//マウスがスクロール領域内にあるとき、スクロールを停止します
}, function(){
_moving=setInterval(function) (){
var _field =_wrap.find('li:first');//この変数は関数の先頭に置くことはできません、li:first の値は変化します
var _=_field.height ();//各スクロールの高さを取得します (複数行スクロールの場合、この変数を先頭に置くことはできません。そうしないと間隔の遅延が発生します)
_field.animate({marginTop:-_h 'px) '},600, function(){//pass 負のマージン値を取得し、最初の行を非表示にします
_field.css('marginTop',0).appendTo(_wrap);// 非表示にした後、マージン値を設定しますシームレスなスクロールを実現するには、行の値をゼロにして最後に挿入します。
})
},_interval)//スクロール間隔は _interval に依存します
}).trigger('mouseleave');//関数がロードされると、mouseleave がシミュレートされます。つまり、自動スクロール
});
デモコード:

<script> /******************************* * @author Mr.Think * @author blog http://mrthink.net/ * @2010.08.08 * @可自由转载及使用,但请注明版权归属 *******************************/ $(function(){ //单行应用@Mr.Think var _wrap=$('ul.line');//定义滚动区域 var _interval=2000;//定义滚动间隙时间 var _moving;//需要清除的动画 _wrap.hover(function(){ clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动 },function(){ _moving=setInterval(function(){ var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的 var _h=_field.height();//取得每次滚动高度 _field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行 _field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动 }) },_interval)//滚动间隔时间取决于_interval }).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动 }); $(function(){ //多行应用@Mr.Think var _wrap=$('ul.mulitline');//定义滚动区域 var _interval=3000;//定义滚动间隙时间 var _moving;//需要清除的动画 _wrap.hover(function(){ clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动 },function(){ _moving=setInterval(function(){ var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的 var _h=_field.height();//取得每次滚动高度 _field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行 _field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动 }) },_interval)//滚动间隔时间取决于_interval }).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动 }); </script> [Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

CSS でシームレスなスクロール効果を実現するためのヒントと方法 CSS でシームレスなスクロール効果を実現するためのヒントと方法 Oct 25, 2023 pm 12:31 PM

CSS でシームレスなスクロール効果を実現するためのヒントと方法

CSS を使用してシームレスなスクロール テキスト カルーセル効果を作成する方法 CSS を使用してシームレスなスクロール テキスト カルーセル効果を作成する方法 Oct 25, 2023 am 10:24 AM

CSS を使用してシームレスなスクロール テキスト カルーセル効果を作成する方法

純粋な CSS を通じてシームレスなスクロール ニュースを実現するための方法とテクニック 純粋な CSS を通じてシームレスなスクロール ニュースを実現するための方法とテクニック Oct 19, 2023 am 10:46 AM

純粋な CSS を通じてシームレスなスクロール ニュースを実現するための方法とテクニック

Vue を使用してシームレスなスクロール広告効果を実現する方法 Vue を使用してシームレスなスクロール広告効果を実現する方法 Sep 21, 2023 am 11:24 AM

Vue を使用してシームレスなスクロール広告効果を実現する方法

CSS を使用してシームレスなスクロール画像カルーセル効果を作成する方法 CSS を使用してシームレスなスクロール画像カルーセル効果を作成する方法 Oct 20, 2023 pm 03:37 PM

CSS を使用してシームレスなスクロール画像カルーセル効果を作成する方法

CSS を使用してシームレスなスクロール画像表示バー効果を作成する方法 CSS を使用してシームレスなスクロール画像表示バー効果を作成する方法 Oct 16, 2023 am 08:09 AM

CSS を使用してシームレスなスクロール画像表示バー効果を作成する方法

CSS を使用してシームレスなスクロール テキスト表示効果を作成する方法。 CSS を使用してシームレスなスクロール テキスト表示効果を作成する方法。 Oct 21, 2023 am 09:10 AM

CSS を使用してシームレスなスクロール テキスト表示効果を作成する方法。

HTML、CSS、jQuery を使用してシームレスなスクロール ニュース通知を実現する方法 HTML、CSS、jQuery を使用してシームレスなスクロール ニュース通知を実現する方法 Oct 25, 2023 am 11:55 AM

HTML、CSS、jQuery を使用してシームレスなスクロール ニュース通知を実現する方法

See all articles