2008/2/22 Friday 14:08:36
コンパクトなRSSティッカーを作りたいと思って探していたらaScroller jsというのを見つけた。
http://digitalhymn.com/argilla/ascroller/
風俗店専門ASPサービスF-Joys(エフジョイズ) のHOMEに縦バージョンを置いてみた。
横スクロールだと<marquee>でも事足りるように見えるが、オンマウスで流れが止まるというのが素敵。
利用も簡単でダウンロードしたScriptを任意の場所に置き、
<script type=”text/javascript” xsrc=”aScroller-1.0.js” mce_src=”aScroller-1.0.js” ></script>
HTML側に
<div id=”Scroll” style=”height:20px; width:680px;”>
<div><span class=”RssTitle”><a xhref=”http://blog.joys-web.com/category/fjoys” mce_href=”http://blog.joys-web.com/category/fjoys” target=”_blank”>★オススメブログエントリー</a></span></div>
<div><span class=”RssTitle”><a xhref=”http://blog.joys-web.com/category/fjoys” mce_href=”http://blog.joys-web.com/category/fjoys” target=”_blank”>【風俗店のインターネット活用】</a></span><span class=”RssDijest”><a xhref=”http://blog.joys-web.com/fjoys/post55.html” mce_href=”http://blog.joys-web.com/fjoys/post55.html” target=”_blank”>デリヘルなどの風俗店様においては、今やインターネットは必要不可欠な存在になっています…</a></span></div>
</div>
<script type=”text/javascript”>
divScroller(”Scroll”, “v”, 30, 5000);
</script>
のように記載するだけ。
divScroller(”Scroll”, “v”, 30, 5000);
の第一引数は id名(<div id=”Scroll” style=”height:20px; width:680px;”>のid)
第二引数は スクロール形式の縦横を指定(hは横、vは縦)
第三引数は スピード(数字が小さいほど早い)
第四引数は ディレイ(数字が小さいほど早い、横スクロールでは意味がない?)
style=”height:20px; width:680px;”はCSSファイルに書かず、上記のようにHTMLに書かないと正常動作しないので注意。
これとPHPを組み合わせれば思い通りのものができそうだ。