jqueryを利用して下から上へと動くtickerをつくる

2012年1月27日:ticker.jsを一部変更しました(下記コードのadd/delete部分)。

上下に動くtickerが欲しかったので、練習がてらに作ってみる。

デモ

ファイル一式

ticker.js

[PHP]
$(function() {
//ticker切り替え速度(ms)
var interval = 3000;

//fadeIn/fadeOut速度(ms)
var fadetime = 500;

//移動速度(ms)
var movetime = 1000;

//#tickerの高さを取得
var ticker_height = $(‘#ticker ul li’).height();

//初期設定
$(“#ticker ul li:not(:first)”).css({“opacity”:0}).hide();

function move(){
//setInterval
var tim = setInterval(function(){
//1番目の要素をフェイドアウト
$(“#ticker ul li:first”).animate({“opacity”:0},fadetime);

//2番目の要素をフェイドイン
$(“#ticker ul li:eq(1)”).show().animate({“opacity”:1},fadetime);

//ul全体を上に移動
$(“#ticker ul”).animate({“margin-top”: 0 – ticker_height + “px”},{easing: ‘easeOutBack’, duration: movetime, complete:function(){
//移動終了後、先頭の要素を末尾へ移動し、アニメーションした分だけ下へ移動
//$(“#ticker ul li:first”).appendTo(“#ticker ul”).hide();//20120127 delete
$(“#ticker ul li:first”).appendTo(“#ticker ul”);//20120127 add
$(“#ticker ul”).css(“margin-top”, “0px”);
}
});
},interval);
}

//実行
move();
});
[/PHP]

ticker.css

[PHP]
@charset “utf-8″;

/* basic */
body,h1,p,ul,li {
margin:0;
padding:0;
font-family:”ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;
}

/* ticker */
#ticker {
height:32px;
padding:6px 0 0 6px;
border:1px solid #999;
-webkit-border-radius:3px;
-moz-border-radius:3px;
overflow:hidden;
}

#ticker ul li{
height:24px;/*必須*/
}
[/PHP]

index.html

[PHP]




ticker sample



ticker



[/PHP]

本スクリプトについて、もし参考になるのでしたら改変等を含めて全く自由に使っていただいて構いませんが、利用した事による不利益等につきましては一切責任を追うことは出来ません。あらかじめご了承下さい。

“jqueryを利用して下から上へと動くtickerをつくる” への2件の返信

  1. 素晴らしいです。
    ニュースティッカーのJSを探していてこちらに辿りつきました。
    ばっちり動きました。ありがとうございます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA