jquery無縫滾動文字
阿新 • • 發佈:2019-01-26
$(document).ready(function(){
$("#scrollDiv").textSlider({line:1,speed:500,timer:3000});
});
(function($){
$.fn.textSlider = function(settings){
settings = jQuery.extend({
speed : "normal",
line : 2,
timer : 1000
}, 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").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();
};
})(jQuery);