"use strict";
/**
* @classDescription 模拟Marquee,无间断滚动内容
* @author Lyc 修改
* @DOM
*
* @CSS
* #marquee {overflow:hidden;width:200px;height:50px;}
* @Usage
* $("#marquee").kxbdMarquee(options);
* @options
* isEqual:true, //所有滚动的元素长宽是否相等,true,false
* loop:0, //循环滚动次数,0时无限
* direction:"left", //滚动方向,"left","right","up","down"
* scrollAmount:1, //步长
* scrollDelay:20 //时长
*/
(function ($) {
$.fn.kxbdMarquee = function (options) {
var opts = $.extend({}, $.fn.kxbdMarquee.defaults, options);
return this.each(function () {
var $marquee = $(this); //滚动元素容器
var _scrollObj = $marquee.get(0); //滚动元素容器DOM
var scrollW = $marquee.width(); //滚动元素容器的宽度
var scrollH = $marquee.height(); //滚动元素容器的高度
var $element = $marquee.children(); //滚动元素
var $kids = $element.children(); //滚动子元素
var scrollSize = 0; //滚动元素尺寸
//滚动类型,1左右,0上下
var _type = opts.direction == "left" || opts.direction == "right" ? 1 : 0;
//防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度
$element.css(_type ? "width" : "height", 10000);
//获取滚动元素的尺寸
if (opts.isEqual) {
scrollSize = $kids[_type ? "outerWidth" : "outerHeight"]() * $kids.length;
} else {
$kids.each(function () {
scrollSize += $(this)[_type ? "outerWidth" : "outerHeight"]();
});
};
//滚动元素总尺寸小于容器尺寸,不滚动
if (scrollSize < (_type ? scrollW : scrollH)) {
return;
};
//克隆滚动子元素将其插入到滚动元素后,并设定滚动元素宽度
$element.append($kids.clone()).css(_type ? "width" : "height", scrollSize * 2);
var numMoved = 0;
function scrollFunc() {
var _dir = opts.direction == "left" || opts.direction == "right" ? "scrollLeft" : "scrollTop";
if (opts.loop > 0) {
numMoved += opts.scrollAmount;
if (numMoved > scrollSize * opts.loop) {
_scrollObj[_dir] = 0;
return clearInterval(moveId);
};
};
if (opts.direction == "left" || opts.direction == "up") {
var newPos = _scrollObj[_dir] + opts.scrollAmount;
if (newPos >= scrollSize) {
newPos -= scrollSize;
}
_scrollObj[_dir] = newPos;
} else {
var newPos = _scrollObj[_dir] - opts.scrollAmount;
if (newPos <= 0) {
newPos += scrollSize;
};
_scrollObj[_dir] = newPos;
};
};
//滚动开始
var moveId = setInterval(scrollFunc, opts.scrollDelay);
//鼠标划过停止滚动
$marquee.hover(function () {
clearInterval(moveId);
}, function () {
clearInterval(moveId);
moveId = setInterval(scrollFunc, opts.scrollDelay);
});
});
};
$.fn.kxbdMarquee.defaults = {
isEqual: true, //所有滚动的元素长宽是否相等,true,false
loop: 0, //循环滚动次数,0时无限
direction: "left", //滚动方向,"left","right","up","down"
scrollAmount: 1, //步长
scrollDelay: 20 //时长
};
$.fn.kxbdMarquee.setDefaults = function (settings) {
$.extend($.fn.kxbdMarquee.defaults, settings);
};
})(jQuery);
//# sourceMappingURL=jquery.kxbdMarquee.js.map