いろいろな動きをするニュースティッカー(News Ticker) jQueryプラグイン

  • このエントリーをはてなブックマークに追加

ティッカーをいろいろ探していたのですが、思い通りのものがみつかりませんでした・・。

なので、いくつか動きを作ってみました!

ティッカーを使う機会はあまりないかもしれないけど、使う機会があったら使ってみよー!


仕様

  • いまのところ4つの動きを指定できます。
  • ページに複数設置できます。(違う動きでもOK!)
  • スマートフォンでも使える。

使い方

head内でjQueryとTickerを読み込むだけです。jQueryを先に読み込んでください。

注意 : HTMLとsmoothAnchor.jsの文字コードをあわせてください。

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

それぞれ動きによってtypeの部分を変更してください。

/*通常*/
$(".ticker li").newsTicker({type:"normal"});
/*素早くティッカー*/
$(".ticker li").newsTicker({type:"move1"});
/*フェイドインフェイドアウト*/
$(".ticker li").newsTicker({type:"fade"});
/*縦移動*/
$(".ticker li").newsTicker({type:"longitudinally"});

HTML

HTMLはulでリストをつくりclass="ticker"で囲ってください。

<div class="ticker" id="ticker">
	<ul>
		<li>110101 ニュース1</li>
		<li>110202 ニュース2</li>
		<li>110303 ニュース3</li>
		<li>110404 ニュース4</li>
	</ul>
</div>

CSS

.tickerのwidthposition: relative;overflow: hidden;の部分は重要です!(次に出てくる文字などが上手く隠れるようになっています。)

その他の部分はデザインに合わせてカスタマイズしてください!

div.ticker {
	margin: 20px;
	width: 600px;
	position: relative;
	overflow: hidden;
	border: 1px solid #369;
}

div.ticker ul {
	height: 1.6em;
}

div.ticker ul li {
	float: left;
	display: inline;
	clear: both;
	text-align: left;
	list-style-type: none;
	position: relative;
	line-height: 1.6em;
	margin-bottom: -1.6em;
}


div#longitudinally ul li,
div#fade ul li {
	left: 10px;
}

動きによって使える設定(引数)

通常(normal)
  • speed : スピード調節
素早くティッカー通常(move1)
  • speed1 : 出てくる時のスピード調節
  • speed2 : 引っ込んでいくときののスピード調節
  • delay1 : 出終わった後引っ込むまでの時間
  • delay2 : 引込み終わった後次がでてくるまでの時間
  • easing : 最初出てくる時のeasing(easingはスムーズアンカーと同じものを使っているので参考にしてください。)
フェイドインフェイドアウト(fade)
  • delay : 次が出てくるまでの時間
縦移動(longitudinally)
  • delay : 次が出てくるまでの時間

例えば・・。

「move1」の動きを全て設定しなおしたい場合はこんな感じになります!

/*素早くティッカー*/
$(".ticker li").newsTicker({type:"move1",speed1:1000,speed2:100,delay1:100,delay2:200,easing:"easeOutBounce"});

初期設定

  • delay: 2000,
  • delay1: 1000,
  • delay2: 500,
  • speed: 50,
  • speed1: 1000,
  • speed2: 50,
  • easing: "easeOutQuad",
  • type: "normal",

動作環境

  • IE6
  • IE7
  • IE8
  • Firefox
  • Opera
  • Safari
  • Chrome
  • 最新スマートフォン

今後の課題

  • 可変サイズでウィンドウサイズを変更しても大丈夫なようにする。
  • 動きのバリエーションを増やす。
  • 「戻る」「次へ」ボタン追加。

あったらいいなぁー・・。って思ってるだけです・・。難しい^^;

コメント : 13

コメントフォーム
瀬戸 : 2011年07月29日 (金) 19:53

よろしく

jquery lover : 2011年10月17日 (月) 16:31

ぜんぜん使えませんでしたけど。。

kamem : 2011年10月18日 (火) 18:28

ごめんなさい m(_ _ )m
時間があれば、もっといろんな動きを追加していきたいとおもってます!

loveThisCode : 2012年01月26日 (木) 19:11

こんばんは。
ありがたく使用させていただいています!

1点だけお伺いしたいのですが、
複数ページにティッカーを表示させてて、ページ遷移してると
時々ティッカーが流れないときがあります・・・
使用している動きはmove1です。
対策ってありますでしょうか?

kamem : 2012年01月28日 (土) 14:25

> loveThisCodeさん

同じページに複数のティッカーを埋め込んでいるということでしょうか?

んー、原因はすぐにはわからないです・・。
もし解決できましたら、修正しますね。

まさ : 2014年04月18日 (金) 22:37

li 要素内に改行があると2行3行で表示されてうまくいかない場合がありました。 css内 div.ticker ul li にwhite-space: nowrap;で対処できました。

kamem : 2014年04月18日 (金) 22:37

> まささん
ご報告ありがとうございます!

匿名 : 2014年04月18日 (金) 22:40


  • が1つのときループしません。

    めろ : 2014年04月18日 (金) 22:41

    初歩的な質問すみません!
    $(".ticker li").newsTicker({type:"normal"});
    とかはどこにつけたらいいですか?

    kamem : 2014年04月18日 (金) 22:42

    御返事遅くなりすみません!
    > 匿名さん
    ちょっと前に作ったものなので、はっきりとは覚えていないのですが・・。
    一つのときはあえてループしないようにしていたかと思います!
    ちょっとその辺りも設定できるように作り変える必要があるかもしれません。
    そのあたり作りなおしたら報告するようにしますっ!

    >めろさん
    $(".ticker li").newsTicker({type:"normal"});
    これはjQueryとticker.jsをを読み込んだあとに
    設定してくださいー。

    海豹仁 : 2014年04月18日 (金) 22:43

    はじめまして。
    インターネット放送局イッツ代表の海豹仁と申します。
    大変、助かりました!
    ありがたく使用させていただいています。

    pepe : 2014年04月18日 (金) 22:44

    ありがとうございます。
    使わせていただきます!
    ところで、、、1記事あたりの文字数ってどこで制限されているんでしょうか?
    ノーマルな横スクロールでやってみているのですが全角43文字までで切れてしまいます。

    milkyway : 2014年04月18日 (金) 22:44

    便利なものを見つけました。使ってみたいと思います。
    ちゃんと 記述できるか不安ですが・・・

    トラックバック : 0

    http://develo.org/mt/mt-tb.cgi/77

    このページの先頭へ戻る