jQuery_jquery に基づくシームレスなスクロールアプリケーション (単一行または複数行)-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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 がシミュレートされます。つまり、自動スクロール
});
デモコード:

<h1>
<a href="http://mrthink.net/">
</a>
</h1>Mr.Think の個人ブログ<h3>
@フロントエンド テクノロジーに焦点を当て、PHP を愛し、シンプルな生活を提唱します。<a href="http://mrthink.net/js-jq-autoscroll-updown/">
</a>記事ページに戻る:</h3>jQuery ベースのシームレスなスクロール アプリケーション (単一行または複数行)<h2>
</h2>
<ul class="line">単一行アプリケーション<li>
<a title="简易的点击展开/关闭效果(原生JS版和JQ版)" href="http://mrthink.net/js-jq-click-openclose/">
</a>
</li>簡単なクリックによる展開/閉じる効果 (ネイティブ JS バージョンおよび JQ バージョン)<li> 2010 年 8 月 2 日 (6)<a title="getElementsByTagName的简写方式" href="http://mrthink.net/javascrip-simple-getelementsbytagname/">
</a>
</li>getElementsByTagName<li> 2010 年 6 月 24 日 (4)<a title="一个简单的鼠标划过切换效果" href="http://mrthink.net/script-mousechange-simple/"> の略称
</a>
</li>単純なマウスオーバーによる切り替え効果<li> 2010 年 5 月 23 日 (4)<a title="奇或偶数行高亮显示及鼠标划过高亮显示类" href="http://mrthink.net/javascript-tagnames-highlight/"></a>
</li>奇数行または偶数行の強調表示とマウスオーバーによる強調表示 <li> 2010 年 5 月 5 日 ( 5)<a title="一个简单的纵横向动画效果类" href="http://mrthink.net/javascrip-dom-slide-simple/">
</a>
</li>簡単な縦横アニメーション効果クラス<li> 2010 年 5 月 2 日 (4)<a title="document.getElementById的简写方式" href="http://mrthink.net/javascript-getbyid-simplewrite/"></a>
</li>document.getElementById の略称<li> 2010 年 4 月 18 日 (1)<a title="两种简单实现菜单高亮显示的JS类" href="http://mrthink.net/javascript-highlight-menu-twoway/">
</a>
</li>メニューの強調表示を実装するための 2 つの単純な JS クラス</ul> 2010 年 4 月 17 日 (10)
<h2>
</h2>
<ul class="mulitline">複数行のアプリケーション<li>
<a title="一个简单的鼠标划过切换效果" href="http://mrthink.net/script-mousechange-simple/">
</a>
</li>単純なマウスオーバーによる切り替え効果<li> 2010 年 5 月 23 日 (4)<a title="奇或偶数行高亮显示及鼠标划过高亮显示类" href="http://mrthink.net/javascript-tagnames-highlight/"></a>
</li>奇数行または偶数行の強調表示とマウスオーバーによる強調表示 <li> 2010 年 5 月 5 日 ( 5)<a title="getElementsByTagName的简写方式" href="http://mrthink.net/javascrip-simple-getelementsbytagname/">
</a>
</li>getElementsByTagName<li> の略称 2010 年 6 月 24 日 (4)<a title="两种简单实现菜单高亮显示的JS类" href="http://mrthink.net/javascript-highlight-menu-twoway/">
</a>
</li>メニューの強調表示を実装するための 2 つの単純な JS クラス<li> 2010 年 4 月 17 日 (10)<a title="简易的点击展开/关闭效果(原生JS版和JQ版)" href="http://mrthink.net/js-jq-click-openclose/">
</a>
</li>簡単なクリックによる展開/閉じる効果 (ネイティブ JS バージョンおよび JQ バージョン)<li> 2010 年 8 月 2 日 (6)<a title="一个简单的纵横向动画效果类" href="http://mrthink.net/javascrip-dom-slide-simple/">
</a>
</li>簡単な縦横アニメーション効果クラス<li> 2010 年 5 月 2 日 (4)<a title="document.getElementById的简写方式" href="http://mrthink.net/javascript-getbyid-simplewrite/"></a>
</li>document.getElementById の略称</ul> 2010 年 4 月 18 日 (1)

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。