插件代码
;(function ($) {
// jQuery marquee 插件
$.fn.marquee = function (options) {
// 默认设置
var defaults = {
derection: "top",
interval: 50
};
// 合并后的参数设置
var options = $.extend(defaults, options);
var $mar = $(this),
original = $mar.children().first(),
clone = original.clone(),
height = original.height(),
width = original.width(),
i = 0,
tId = null; // 唯一的tId，可以通过clearTimeout(tId)清除干净
// append clone to marquee
$mar.append(clone);
// scrolltop
var scrolltop = function () {
if (i < height) {
$mar.scrollTop(i++);
} else {
i = 0;
$mar.scrollTop(0);
}
tId = setTimeout(scrolltop, options.interval);
};
// scrollbottom
var scrollbottom = function () {
if (i === 0) {
i = height;
$mar.scrollTop(i);
} else {
$mar.scrollTop(i--);
}
tId = setTimeout(scrollbottom, options.interval);
};
// scrollleft
var scrollleft = function () {
if (i < width) {
$mar.scrollLeft(i++)
} else {
i = 0;
$mar.scrollLeft(0);
}
tId = setTimeout(scrollleft, options.interval);
};
// scrollright
var scrollright = function () {
if (i === 0) {
$mar.scrollLeft(width);
i = width;
} else {
$mar.scrollLeft(i--);
}
tId = setTimeout(scrollright, options.interval);
};
// scroll to which derection
var scrollto = {
top: scrolltop,
bottom: scrollbottom,
left: scrollleft,
right: scrollright
};
// 根据参数选择滚动函数
tId = setTimeout(scrollto[options.derection], options.interval);
// when mouse hover clearTimeout or setTimeout
$mar.hover(function () {
clearTimeout(tId);
}, function () {
tId = setTimeout(scrollto[options.derection], options.interval);
});
};
})(jQuery);
示例一：上滚动（默认）
<!-- html code -->
<div class="marquee">
<ul>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
</ul>
</div>
/* css code */
.marquee{
border:1px solid #0a0;
width:300px;
height:100px;
overflow:hidden;
}
.marquee li{
font-size:16px;
line-height:1.5;
}
// js code：插件应用
$(".marquee").marquee();
示例二：左滚动
<!-- html code -->
<div class="marquee2">
<ul>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
</ul>
</div>
/* css code */
.marquee2{
width:300px;
height:25px;
border:1px solid #00a;
overflow:hidden;
white-space: nowrap; /* 文字超出时不换行！！ */
}
.marquee2 ul, .marquee2 li{
display:inline;
font-size:16px;
line-height:25px;
}
// js code：插件应用
$(".marquee2").marquee({derection: "left", interval: 25});