【ハウツー】
個別に速度を変えてスクロールさせたい場合には、それぞれに$(●).liScroll({travelocity: 値})を指定します。サンプル03では2つの領域を異なる速度でスクロール表示しています。
liScrollでスクロールする領域や位置を指定するにはスタイルシートを変更します。横幅は.tickercontainerと.tickercontainer .maskにwidthプロパティを使って指定します。内容の表示開始位置はul.newstickerのleftプロパティで指定します。
.tickercontainer {
width: 480px;
}
.tickercontainer .mask {
width: 460px;
}
ul.newsticker {
left: 480px;
}
liScrollはアクセシビリティを保ったまま、限定された範囲で多くの情報を表示したい場合に有効でしょう。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery liScrollサンプル</title>
<link rel="stylesheet" href="css/liscroll.css" type="text/css">
<link rel="stylesheet" href="css/main.css" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.li-scroller.1.0.js"></script>
<script type="text/javascript"><!--
$(function() {
$("#news1").liScroll({travelocity: 0.03});
$("#news2").liScroll({travelocity: 0.1});
});
// --></script>
</head>
<body>
<h1>jQuery liScrollサンプル</h1>
<ul id="news1">
<li>liScroll Sample <a href="#">[liScrollのページへ]</a></li>
<li>liScrollはjQueryのプラグインです <a href="#">[詳細]</a></li>
<li>手軽にNews Tickerが作れます <a href="#">[View Sample]</a></li>
</ul>
<ul id="news2">
<li>liScroll Sample <a href="#">[liScrollのページへ]</a></li>
<li>liScrollはjQueryのプラグインです <a href="#">[詳細]</a></li>
<li>手軽にNews Tickerが作れます <a href="#">[View Sample]</a></li>
</ul>
</body>
</html>
| ゼロからはじめるFancyForm - フォームやラジオボタンをグラフィカルに [2008/3/19] |
| ゼロからはじめるFrogJS - CSS不要の画像表示ライブラリ [2008/3/11] |
| ゼロからはじめるYahoo! UI Library - SimpleDialog編 [2008/2/13] |
| ゼロからはじめるThe Yahoo! UI Library - Logger編 [2008/1/24] |
| ゼロからはじめるYahoo! UI Library - TabView編 [2008/1/23] |
| レノボ・ジャパン、ウェブ広告モデルを一般公募 - 新生活キャンペーンの一環で [21:21 2/10] |
| 【レポート】スマートフォンを狙ったワンクリック詐欺やオンラインバンキングを狙うゼットボット - トレンドマイクロマンスリーレポート [20:43 2/10] |
| 【レポート】レノボ、大和研究所の開発陣らによる「ThinkPad X1 Hybrid」の技術解説 [20:41 2/10] |
| デル、「冬モデルファイナルセール」最終週 - 各種アップグレードが無料 [20:13 2/10] |
| Appleが3月初旬にスペシャルイベント開催の噂 - iPad 3の発表か [18:34 2/10] |
|
【レポート】「appliko」がオススメAndroidアプリを紹介!! - 1月31日~2月8日のAndroidアプリランキング [01:30 2/11] 携帯 |
|
【レポート】人気の無料/有料アプリを毎週紹介 - 1月31日~2月8日のAndroidアプリランキング [01:00 2/11] 携帯 |
|
渡部篤郎主演でドラマ化!地元新聞社が伝え続けた東日本大震災の物語 [00:08 2/11] キャリア |
|
沖縄発ヒーロー革命!「琉神マブヤー」が海を越えハワイを目指す! [00:08 2/11] キャリア |
|
中国四川省、パンダの保護と生態研究の最新情報とは? [00:08 2/11] キャリア |