JQ文字向上輪播
效果前(如下圖):
效果後(如下圖):
html:
<ul id="J-lunbo-ul" >
<li>
<div class="textBanner-center">
<p>頂替1</p>
<p>要要1</p>
</div>
<div class="textBanner-right">9天前</div>
</li>
</ul>
要做的效果是文字向上輪播,js程式碼如下:
$.fn.textSlider = function(settings){
settings = jQuery.extend({
speed : "normal",
line : 2,
timer : 3000
}, settings);
return this.each(function() {
$.fn.textSlider.scllor( $( this ), settings );
});
};
$.fn.textSlider.scllor = function($this, settings){
var ul = $("ul:eq(0)",$this );
var timerID;
var li = ul.children();
var liHight=$(li[0]).height();
var upHeight=0-settings.line*liHight;//滾動的高度;
var scrollUp=function(){
ul.animate({marginTop:upHeight},settings.speed,function(){
for(i=0;i<settings.line;i++){
ul.find("li:first",$this).appendTo(ul);
}
ul.css({marginTop:0});
});
};
var autoPlay=function(){
timerID = window.setInterval(scrollUp,settings.timer);
};
var autoStop = function(){
window.clearInterval(timerID);
};
//事件繫結
ul.hover(autoStop,autoPlay).mouseout();
};
呼叫:
$(document).ready(function(){
$("#FontScroll").textSlider({line:1,speed:500,timer:2000});
//line表示的是向上滾動幾行
});