文字列表无缝滚动,通常都有一个毛病,当内容文字较少时,文字就没动静了。当前的无缝滚动文字插件杜绝此毛病,它是根据滚动区域框的高度自动设定滚动文字所在标签的高度,就算一行文字,也能坚持滚动!
(function($) {
$.fn.shangxiagun = function(option) {
var defaultvalue = { speed: 40, mar: null, first: "", second: "" };
var opts = $.extend(defaultvalue, option || {});
var h = $(this).height();
var obj = $(this);
var demo2 = obj.find("#" + opts.second);
demo2.css("min-height", h);
var demo1 = obj.find("#" + opts.first);
demo1.css("min-height", h);
demo2.html(demo1.html());
function quee() {
if (demo2.get(0).offsetTop - obj.get(0).scrollTop <= 0)
obj.get(0).scrollTop -= demo1.get(0).offsetHeight
else {
obj.get(0).scrollTop++
}
}
opts.mar = setInterval(quee, opts.speed)
obj.mouseover(function() { clearInterval(opts.mar) });
obj.mouseout(function() { opts.mar = setInterval(quee, opts.speed) });
}
})(jQuery)
$("#demo").shangxiagun({ first: "demo1", second: "demo2" });
Demo下载页