Javascript
PHP
BGM ShareHouseに用いた技術まとめ - Javascript,PHP

Marquee jQuery Pluginを使って文字を流す

概要

  • HTML5には、文字を水平方向に流すmarqueeタグが存在する
  • HTML5非対応のブラウザでも表示できるようにしたい
  • Javascript(jQuery)を使って実現する
  • 自分で作ろうとしたけど汎用性を確保できない気がした
  • 既存のjQuery向けプラグインスクリプトを使おう
  • Marquee jQuery Pluginが簡単に使える

使用方法

ヘッダに以下を記述

 
<script type="text/javascript" src="jquery.marquee.min.js"></script>

リスト要素に流したい要素を格納する

 
 
 
 
<ul id="marquee_ul" class="marquee">
  <li><span id="text1" class="ticker_text">Text1</span></li>
  <li><span id="text2" class="ticker_text">Text2</span></li>
</ul>

サイトに記述されているようにCSSを書く

-
|
|
|
|
|
|
|
|
|
|
|
|
!
 
-
|
|
|
|
|
|
|
|
|
!
ul.marquee{
  display:block;
  padding:0;
  margin:0;
  list-style:none;
  line-height:1;
  position:relative;
  overflow:hidden;
 
  
  width:300px;
  height:20px;
  border:1px solid #222;
}
 
ul.marquee li{
  position:absolute;
  top:-999em;
  left:0;
  display:block;
  white-space:nowrap;
 
  
  padding:3px 5px;
  color:white;
}

Javascript(要jQuery)で以下を実行すると,テキストが流れだす

-
-
!
!
$(document).ready(function(){
    $("marquee_ul").marquee({pauseOnHover:false,scrollSpeed:24});
}

オプション

Giva Labs - Marquee jQuery Plug-in | Givaのオプション解説のてきとうな日本語訳

-
|
|
|
|
|
|
|
|
|
-
!
|
-
!
|
|
|
!
{ 
         yScroll: "top"                         , showSpeed: 850                         , scrollSpeed: 12                        , pauseSpeed: 5000                       , pauseOnHover: true                     , loop: -1                               , fxEasingShow: "swing"                  , fxEasingScroll: "linear"         
              , cssShowing: "marquee-showing" 
 
              , init: null                             , beforeshow: null                       , show: null                             , aftershow: null                 }

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2013-02-15 (金) 15:54:43 (1649d)