• かちびと.net

    ツールチップも出せるニュースティッカー用jQueryプラグイン・Dynamic Newsのご紹介です。シンプルながらなかなかユニークな機能で使い勝手も良さそうです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

ツールチップも出せるニュースティッカー用jQueryプラグイン・Dynamic News

スポンサーリンク

なかなかユニークだったのでメモ的に。
進める、戻る機能の付いたニューステ
ィッカーを実装するjQueryプラグインで、
ツールチップもついでに出してくれます。
省スペースで情報を凝縮できるのは
なかなかいいですね。

RSSはGoogleAPIを使用しているようです。

Dynamic News


ティッカーにマウスオーバーするとnext、prevのボタンと同時にツールチップを表示します。


進むボタンを押すとニューステキストがスライドします。カルーセルをかけ合わせた感じですね。

使い方

GoogleAPIキーを使ってRSSを取得し、jQuery本体とプラグインを読み込みます。

<script type="text/javascript" src="https://www.google.com/jsapi?key=*****"></script>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="dnews.js" type="text/javascript"></script>

で、RSSのパスを設定

    <script type="text/javascript">
        google.load("feeds", "1");
        $(document).ready(function() {
            $('#snews').dnews({feedurl:'http://www.example.com/rss', showdetail: true, controlsalwaysvisible: false });
        });
    </script>

マークアップもシンプルで済むみたいですね。RSSを使いたくない場合は直接書けばいいみたいです。css等で工夫が必要ですが、IE6や7でも問題なく動作しました。デモとダウンロードは以下にて。

Dynamic News

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services