2007年12月23日 19:01

ティッカー風表現JavaSctipt手作りしてみた

スポンサードリンク

はてなブックマークをみてたら、

MOONGIFT: » サイトにRSSをスクロール表示「Pausing RSS scroller」:オープンソースを毎日紹介 [www.moongift.jp]

て言うのがあったんですが、
縦スク型ティッカーを昔作ったやつがあったので。RSSは自動取得しませんが、そこは別スクリプトでRSSをJavaScriptの配列にしてscript要素でグローバルな変数にぶっ込めばいいですので。

Firefoxだとスピードが出ない。なんでだろ？

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC 
  "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Type"
      content="text/html; charset=UTF-8" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type"  content="text/css"        />
    <script>
    <!--
    if ( typeof $ == 'undefined' ) {
      $ = function (id) { return document.getElementById(id); }
    }
    var rssTicker = function () {
      this.tickerId = 'rssticker';
      this.itemId   = 'rssheadline'
      this.tickerMessage = [
        {
          title: 'M.C.P.C.: ジャグラBBは無料番組をYouTubeにアップすればいいのにね',
          link : 'http://blog.dtpwiki.jp/dtp/2007/12/bbyoutube_63a7.html'
        },
        {
          title: 'M.C.P.C.: ga city 泉和人の世界の印刷ニュースのRSSを用意しました（野良feed）',
          link : 'http://blog.dtpwiki.jp/dtp/2007/12/ga_city_rssfeed_e61d.html'
        },
        {
          title: 'M.C.P.C.: 仲間由紀恵 with ダウンローズ（適法）',
          link : 'http://blog.dtpwiki.jp/dtp/2007/12/with_3222.html'
        }
      ]
      this.showNum = 0;
      this.showMax = this.tickerMessage.length;
      this.tId = 0;
      this.tAnimeId = 0;
      this.interval = 3000;
      this.intervalFPS = 17;
      this.vPosition = 32;
    }
    rssTicker.prototype = {
      begin: function () {
        this.start();
        return;
      },
      start: function() {
          this.show();
        var self = this;
        this.tId = setTimeout(
//                     function(){self.start()},//MacIE5対応
                     'objRssTicker.start()',  //モダンブラウザ用
                     this.interval
                   );
        return;
      },
      stop: function() {
        clearTimeout(this.tId);
        return;
      },
      show: function () {
        this.after();
        return;
      },
      pre: function () {
        this.vPosition = 32;
        this.pre_animation();
        return;
      },
      pre_animation : function () {
        this.locate(0, this.vPosition);
        this.vPosition = this.vPosition - 1;
        if ( this.vPosition >= 0 ) {
          var self = this;
          this.tAnimeId
            = setTimeout(
//                function(){self.pre_animation()}, //モダンブラウザ用
                'objRssTicker.pre_animation()',   //MacIE5対応
                this.intervalFPS
              );
        }
        return;
      },
      after: function () {
        this.vPosition = 0;
        this.after_animation();
        return;
      },
      after_animation : function () {
        this.locate(0, this.vPosition);
        this.vPosition = this.vPosition - 1;
        if (this.vPosition > -32) {
          var self = this;
          this.tAnimeId
            = setTimeout(
//                function(){self.after_animation()}, //モダンブラウザ用
                'objRssTicker.after_animation()',   //MacIE5対応
                this.intervalFPS
              );
        } else {
          $('rssheadline').innerHTML = '<a id="href" href="'
            + this.tickerMessage[this.showNum].link
            + '" target="_blank">'
            + this.tickerMessage[this.showNum].title
            + '</a>'
          ;
          this.showNum++;
          this.showNum %= this.showMax;
          this.pre();
        }
        return;
      },
      locate: function(x, y) {
        this.x = x;
        this.y = y;
        $(this.itemId).style.left = this.x + "px";
        $(this.itemId).style.top  = this.y + "px";
        return [this.x, this.y];
      }
    }
    objRssTicker  = new rssTicker();
    window.onload = function () { objRssTicker.begin() };
    // -->
    </script>
    <style>
    <!--
      div#rsstickerwrapper {
        border:1px solid #aaa;
        width:160px;
        height:52px;
        overflow: hidden;
      }
      div#rssticker {
        border:1px solid #ccc;
        width:140px;
        height:32px;
        overflow: hidden;
        position: relative;
        margin: auto;
        top:9px;
      }
      div#rssheadline {
        border: 0px;
        height: 32px;
        line-height: 32px;
        overflow: hidden;
        position: relative;
        font-size:12px;
        background-color:#fff;
      }
    -->
    </style>
  </head>
  
  <body>
    <div id="rsstickerwrapper">
      <div id="rssticker">
        <div id="rssheadline">
        </div>
      </div>
    </div>
  </body>
</html>

僕が作ったのはdiv要素が1個スクロールするタイプで、次のエントリが出てくるのに時間がかかるのに対し、「Pausing RSS scroller」は、div要素を縦に2つ並べているので、次のエントリがすぐ出てくるんですよね。FireBugで解析すると吉。

さてこれせっかく作ったのですが「横スクロール型のほうがいい」といわれておじゃん。

2007.12.23 19:01 投稿　大野義貴 [Script] | 固定リンク |