ゆっくりと自動で上に流れるニュースティッカー
Result
jQuery
$(document).ready(function() {
var t = $("#ticker");
//ラップする
t.children().filter("h3").each(function() {
var h = $(this),
c = $("<div>");
h.next().appendTo(c);
h.prependTo(c);
c.appendTo(t);
});
//スクロールバー非表示
t.css("overflow", "hidden");
function animator(currentItem) {
var d = currentItem.height();
duration = (d + parseInt(currentItem.css("marginBottom"))) / 0.025;
//アイテムの処理
currentItem.animate({ marginBottom: -d }, duration, "linear", function() {
currentItem.appendTo(currentItem.parent()).css("marginBottom", 0);
animator(currentItem.parent().children(":first"));
});
};
//ティッカーアニメーション開始
animator(t.children(":first"));
//マウスセンサーをセット
t.mouseenter(function() {
//ストップ
t.children().stop();
});
//マウスが外れた時の処理
t.mouseleave(function() {
animator(t.children(":first"));
});
});
css
#ticker {
width:180px;
height:300px;
border:1px solid #ccc;
overflow:auto;
}
#ticker h3 {
font-size: 14px;
padding:0 10px 5px 10px;
background-color:#eee;
padding-top:10px;
border:1px solid #fff;
border-bottom:none;
border-right:none;
position:relative;
}
#ticker div.text {
margin-left:0;
font-size: 11px ;
padding:0 10px 10px 10px;
border-bottom:1px solid #ccc;
background-color:#eee;
border-left:1px solid #fff;
position:relative;
}
#ticker div.last {
border-bottom:1px solid #fff;
}
#ticker div { margin-top:0; }
html
<div id="tickerContainer">
<div id="ticker">
<h3 class="heading">News title</h3><div class="text">text </div>
<h3 class="heading">News title</h3><div class="text">text </div>
</div>
</div>
via
How to Create a Simple News Ticker