jQueryプラグイン—【画像文字ループスクロール】
このブログでは、このようなループスクロールプラグインを発表しましたが、最近は比較的コンパクトで実用的なプラグインを見て、一緒に研究を共有しています.各スクロール要素の幅または高さが統一されていないことが特徴です.文字にかかわらず画像にかかわらずループ表示、いわゆる無停止表示です.
まず最初の状況を見てみましょう.
要素の合計高さはコンテナの高さより小さく、スクロールしません.
2つ目のケース1つ目のケースの比較:
要素行の高さを統一しないことができます
呼び出し方法:
3つ目の状況画像:
左に反転
呼び出し方法(実際には同じ):
demoダウンロード例の表示
まず最初の状況を見てみましょう.
要素の合計高さはコンテナの高さより小さく、スクロールしません.
2つ目のケース1つ目のケースの比較:
要素行の高さを統一しないことができます
呼び出し方法:
$(".scroll_two").jScroll({vertical: true});
<h2> </h2>
<div class="box scroll_two">
<ul>
<li><a href="#"> </a>| <a href="#"> </a></li>
<li><a href="#"> </a>| <a href="#"> 9 </a></li>
<li><a href="#"> </a>| <a href="#"> , </a></li>
<li><a href="#"> </a>| <a href="#"> </a></li>
<li><a href="#"> </a>| <a href="#">2009CIHAF </a></li>
<li><a href="#"> </a>| <a href="#"> 50% ?</a></li>
</ul>
</div>
3つ目の状況画像:
左に反転
呼び出し方法(実際には同じ):
$(".scroll_three").jScroll({speed: 2000, scroll: 3});
<h2> </h2>
<div class="box scroll_three">
<ul>
<li><a href="#"><img src="images/1.jpg" width="130" height="107" alt="" /></a></li>
<li><a href="#"><img src="images/2.jpg" width="130" height="107" alt="" /></a></li>
<li><a href="#"><img src="images/3.jpg" width="130" height="107" alt="" /></a></li>
<li><a href="#"><img src="images/4.jpg" width="130" height="107" alt="" /></a></li>
<li><a href="#"><img src="images/5.jpg" width="130" height="107" alt="" /></a></li>
<li><a href="#"><img src="images/6.jpg" width="130" height="107" alt="" /></a></li>
</ul>
</div>
demoダウンロード例の表示