今回ご紹介するのは、まるでその場で誰かが文章を入力しているかのようにテキストを表示するjQueryプラグイン「jquery.jaticker.js」です。
サンプルを作ってみました。
→ jQueryプラグイン「jquery.jaticker.js」サンプル
設置方法も簡単です。使用方法は続きをご覧下さい。
【使用方法】
まずはこちらの本家のサイトから、jquery.jaticker_1.0.0のcss ファイルと js ファイルをダウンロードします。
<head>部分にｊｓファイルとｃｓｓファイルを設定します。パスに注意しましょう。
|
1 2 3 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="jquery.jaticker_1.0.0.js"></script> <link rel="stylesheet" href="jquery.jaticker_1.0.0.css" type="text/css"> |
</body>直前にJavaScriptを設定します。
|
1 2 3 |
<script> $('#ｉｄ名').jaticker(); </script> |
<body>部で対象となるＩｄ名で要素を呼び出すと、ワープロで打っているかのようにテキストが表示されます。
|
1 2 3 |
<div id="ｉｄ名"> ここにテキスト。 </div> |
ひらがなを変換して漢字を表示させているようにみせるには、ruby 要素を使います。ruby 要素に囲まれた中に rt 要素があると、それを読みとして使って日本語変換しているように表示されます。
|
1 |
<ruby>漢字に変換された文章<rt>かんじにへんかんされたぶんしょう</rt></ruby> |
サンプルのソースは以下の通りです。どうぞご参考まで。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>まるでワープロ入力しているかのようにテキスト文章を表示させるjQueryプラグイン「jquery.jaticker.js」サンプル</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="jquery.jaticker_1.0.0.js"></script> <link rel="stylesheet" href="jquery.jaticker_1.0.0.css" type="text/css"> </head> <body> <div id="jaticker"> ぱんにゃっとへの<ruby>ご訪問<rt>ごほうもん</rt></ruby>ありがとうございます。<br /> これからも<ruby>頑張って更新しますので、<rt>がんばってこうしんしますので、</rt></ruby><ruby>よろしくお願いします。<rt>よろしくおねがいします。</rt></ruby>m(__)m </div> <script> $('#jaticker').jaticker(); </script> </body> </html> |
あわせてお読みください
「jQuery.dotdotdot」はボックス要素からはみ出た分のテキストを自動的に省略してくれるという地味に便利なjQueryプラグインです。 省略したあとに…
jQuery.mb.YTPlayer メルセデス・ベンツ日本公式サイトでオリジナルアニメが公開されていますね。テレビでもCMに使われていたので、ご存知の方も多い…
Smooth Vertical or Horizontal Page Scrolling with jQuery 他のサイトと差をつけて、サイトを横スクロール…
コメントを残す