https://icmm.ac.cn/content/main/base/js/jquery.kxbdmarquee.js

1/**
2 * @classDescription 模拟Marquee，无间断滚动内容
3 * @author Aken Li(www.kxbd.com)
4 * @DOM
5 *  	<div id="marquee">
6 *  		<ul>
7 *   			<li></li>
8 *   			<li></li>
9 *  		</ul>
10 *  	</div>
11 * @CSS
12 *  	#marquee {overflow:hidden;width:200px;height:50px;}
13 * @Usage
14 *  	$("#marquee").kxbdMarquee(options);
15 * @options
16 *		isEqual:true,		//所有滚动的元素长宽是否相等,true,false
17 *  	loop:0,				//循环滚动次数，0时无限
18 *		direction:"left",	//滚动方向，"left","right","up","down"
19 *		scrollAmount:1,		//步长
20 *		scrollDelay:20		//时长
21 */
22(function($){
23	$.fn.kxbdMarquee=function(options){
24		var opts=$.extend({},$.fn.kxbdMarquee.defaults, options);
25
26		return this.each(function(){
27			var $marquee=$(this);				//滚动元素容器
28			var _scrollObj=$marquee.get(0);		//滚动元素容器DOM
29			var scrollW=$marquee.width();		//滚动元素容器的宽度
30			var scrollH=$marquee.height();		//滚动元素容器的高度
31			var $element=$marquee.children();	//滚动元素
32			var $kids=$element.children();		//滚动子元素
33			var scrollSize=0;					//滚动元素尺寸
34
35			//滚动类型，1左右，0上下
36			var _type=(opts.direction=="left"||opts.direction=="right") ? 1:0;
37
38			//防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度
39			$element.css(_type?"width":"height",10000);
40
41			//获取滚动元素的尺寸
42			if(opts.isEqual){
43				scrollSize=$kids[_type?"outerWidth":"outerHeight"]()*$kids.length;
44			}else{
45				$kids.each(function(){
46					scrollSize+=$(this)[_type?"outerWidth":"outerHeight"]();
47				});
48			};
49
50			//滚动元素总尺寸小于容器尺寸，不滚动
51			if(scrollSize<(_type?scrollW:scrollH)){return;}; 
52
53			//克隆滚动子元素将其插入到滚动元素后，并设定滚动元素宽度
54			$element.append($kids.clone()).css(_type?"width":"height",scrollSize*2);
55
56			var numMoved=0;
57			function scrollFunc(){
58				var _dir=(opts.direction=="left"||opts.direction=="right") ? "scrollLeft":"scrollTop";
59				if (opts.loop>0) {
60					numMoved+=opts.scrollAmount;
61					if(numMoved>scrollSize*opts.loop){
62						_scrollObj[_dir]=0;
63						return clearInterval(moveId);
64					};
65				};
66
67				if(opts.direction=="left"||opts.direction=="up"){
68					var newPos=_scrollObj[_dir]+opts.scrollAmount;
69					if(newPos>=scrollSize){
70						newPos-=scrollSize;
71					}
72					_scrollObj[_dir]=newPos;
73				}else{
74					var newPos=_scrollObj[_dir]-opts.scrollAmount;
75					if(newPos<=0){
76						newPos += scrollSize;
77					};
78					_scrollObj[_dir]=newPos;
79				};
80			};
81
82			//滚动开始
83			var moveId=setInterval(scrollFunc, opts.scrollDelay);
84
85			//鼠标划过停止滚动
86			$marquee.hover(function(){
87				clearInterval(moveId);
88			},function(){
89				clearInterval(moveId);
90				moveId=setInterval(scrollFunc, opts.scrollDelay);
91			});
92		});
93	};
94
95	$.fn.kxbdMarquee.defaults={
96		isEqual: false,		//所有滚动的元素长宽是否相等,true,false
97		loop: 0,			//循环滚动次数，0时无限
98		direction: "up",	//滚动方向，"left","right","up","down"
99		scrollAmount:1,		//步长
100		scrollDelay:100		//时长
101
102	};
103
104	$.fn.kxbdMarquee.setDefaults=function(settings) {
105		$.extend( $.fn.kxbdMarquee.defaults, settings );
106	};
107})(jQuery);