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 }
|
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
