jQuery无缝滚动插件
2020-12-13 16:22
标签:style class blog code http tar 插件代码 示例一:上滚动(默认) 示例二:左滚动 jQuery无缝滚动插件,搜素材,soscw.com jQuery无缝滚动插件 标签:style class blog code http tar 原文地址:http://www.cnblogs.com/xiankui/p/3799330.html;(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);
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();
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});