福島・埼玉のWEBサイト制作・ホームページ制作会社 キャスパーウゥブデザイン

ご指定された単一記事を表示しています。
2013年7月27日 タグ:

jQueryプラグイン 縦方向にスクロールするティッカー「vTicker」を実装してみる

縦方向にスクロールするティッカーを実装できるjQueryプラグイン「vTicker」の実装手順をご紹介します。

jQueryプラグイン 縦方向にスクロールするティッカー「vTicker」を実装してみる 1

下のソースのようなリストタグで作られたものを、1行づつスクロールしてくれます。

まずは、どんな感じかご確認ください

▶ vticker

実装手順

下記のようなHTMLタグで作られたリストがあることを前提です。
*クラスやリンクタグが入っていますが、要はリストタグであればOKです。

1.jQueryの読み込み

jQuery読み込み
*<head>〜</head>の間に以下のソースを記述

2.プラグインの読み込み

vtickerDownroad から、ソースを取得してjsファイルとして配置します。

配置したファイルを読み込みます。
ソースは、jQuery読み込みの下に記述します。

3.JavaScriptの記述

以下のコードをプラグインファイルを読み込んだ下に記述します。

4. ▶ DEMO

5.補足

スタイルシートについては、設置されている文字の大きさに合わせて、高さをとってくれます。
また、親要素である <div id="example">の幅より文字数が多い場合は、その部分は非表示になります。

オプションで、以下の設定も可能です。オプションを利用する場合は、「3.JavaScriptの記述」を以下のソースに差し替えてください。

カテゴリー:jQuery
タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

FB Comment 試験中