少しずつ流れて、マウスを乗せるとストップするニュースティッカー
Result
jQuery
jQuery.fn.ls = function(set) {
set = jQuery.extend({
spe: 0.07
}, set);
return this.each(function() {
var $s = jQuery(this);
$s.addClass("newsticker")
var sw = 1;
$s.find("li").each(function(i) {
sw += jQuery(this, i).outerWidth(true);
});
var $mask = $s.wrap("<div class='mask'></div>");
var $ticker = $s.parent().wrap("<div class='ticker'></div>");
var cw = $s.parent().parent().width();
$s.width(sw);
var tt = sw + cw;
var dt = tt / set.spe;
function sn(spazio, tempo) {
$s.animate({
left: '-=' + spazio
}, tempo, "linear", function() {
$s.css("left", cw);
sn(tt, dt);
});
}
sn(tt, dt);
$s.hover(function() {
jQuery(this).stop();
}, function() {
var offset = jQuery(this).offset();
var rs = offset.left + sw;
var rt = rs / set.spe;
sn(rs, rt);
});
});
};
$("ul#ticker01").ls();
|
css
.ticker {
border: 1px solid #ddd;
background: #fff;
width: 600px;
height: 27px;
margin: 0;
padding: 0;
overflow: hidden;
margin:25px;
}
.ticker .mask {
position: relative;
left: 10px;
top: 8px;
width: 718px;
overflow: hidden;
}
ul.newsticker {
position: relative;
left: 750px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left;
margin: 0;
padding: 0;
background: #fff;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #ff0000;
font: bold 10px Verdana;
margin: 0 50px 0 0;
}
ul.newsticker span {
margin: 0 10px 0 0;
}
|
html
<ul id="ticker">
<li><span>10/10/2007</span><a href="#">The first thing ...</a></li>
<li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
<li><span>10/10/2007</span><a href="#">The code that you ...</a></li>
</ul>
|
via
liScroll (a jQuery News Ticker made easy) 1.0
