https://www.cssn.cn/images/resources/ScrollNews.js

1/**
2 * 本组件提供了x新闻滚动的功能。 可以根据用户传入的滚动速度、滚动距离，等参数，将新闻列表生成到指定的容器上，并让新闻列表中的新闻进行滚动。
3 */
4
5Ext.ns("com.trs.ScrollNews");
6(function() {
7	//缓冲新产生的对象，以便可以执行销毁
8	var cache = {};
9
10	/**
11	 *
12	 * @this {String} container:	滚动新闻将渲染在id为domId的容器中 <br>
13	 * @this {String}direction:	新闻滚动方向
14	 * @this {String}speed:	新闻滚动的速度（值越大滚动的越慢）
15	 * @this {String}space:	新闻每次滚动的像素（值越大新闻滚动一次移动的距离越大）
16	 */
17	com.trs.ScrollNews = function(cfg) {
18		cache[cfg.container] = this;
19		Ext.apply(this,cfg);
20		this.speed = parseInt(this.speed, 10) || 50;
21		this.space = parseInt(this.space, 10) || 2;
22		this.content = $(this.container).innerHTML;
23	}
24
25	/**
26	*
27	*/
28	com.trs.ScrollNews.get = function(container){
29		return cache[container];
30	}
31
32	com.trs.ScrollNews.prototype = {
33		/**
34		 * 根据传入的配置信息，将滚动新闻列表渲染在指定的容器内
35		 * 
36		 */
37		render : function() {
38			var container = $(this.container);
39			if (!container) {
40				return;
41			}
42
43			// 产生一个比较长的容器，从而使内部的新闻在一行（或者同一列）显示，不出现折行
44			var bigDiv = document.createElement("div");
45			Element.addClassName(bigDiv,"ScrollNews"+this.direction+"Cls");
46			bigDiv.style.zoom = 1;// 解决ie6下可能存在的不能正确显示的bug
47
48			/*
49			 * 创建两个相同的子div容器，每个div里面包含了所有的新闻
50			 * 为什么创建两个相同的div，是为了解决新闻列表滚动到最尾部的时候再切换 到最初位置时的闪动现象
51			 */
52			this.div1 = document.createElement("div");
53			this.div1.innerHTML = this.content;
54			this.div2 = document.createElement("div");
55			this.div2.innerHTML = this.div1.innerHTML;
56			Element.addClassName(this.div1, "div1Cls");
57			Element.addClassName(this.div2, "div2Cls");
58			// 将创建的大的div添加到指定的容器内
59			bigDiv.appendChild(this.div1);
60			bigDiv.appendChild(this.div2);
61			container.innerHTML = '';
62			container.appendChild(bigDiv);
63			if(this.direction =="vertical"){
64				container.style.height = (this.rollingHeight||20)+"px";
65			}
66			var context = this;
67			container.onmouseover = function() {
68				context.stop();
69			};
70			container.onmouseout = function() {
71				context.play();
72			};
73
74			this.play();
75		},
76
77		// private
78		play : function() {
79			var context = this;
80			clearInterval(this.intervalHandler);
81			this.intervalHandler = setInterval(function() {
82				context.scrollNext();
83			}, this.speed);
84		},
85
86		// private
87		stop : function() {
88			clearInterval(this.intervalHandler);
89		},
90		// private
91		scrollNext : function() {
92			var container = $(this.container);
93			try {
94				if(this.direction == "vertical"){
95					container.scrollTop += this.space;
96				// 如果第一个新闻列表已经滚到容器外面，说明需要重新初始化第一个新闻列表的位置
97					if (container.scrollTop > this.div1.scrollHeight) {
98						container.scrollTop = container.scrollTop
99								- this.div1.scrollHeight;
100					}
101				}
102			
103				else{
104					container.scrollLeft += this.space;
105
106					// 如果第一个新闻列表已经滚到容器外面，说明需要重新初始化第一个新闻列表的位置
107					if (container.scrollLeft > this.div1.scrollWidth) {
108						container.scrollLeft = container.scrollLeft
109								- this.div1.scrollWidth;
110					};
111				}
112			} catch (e) {
113				this.stop();
114				return;
115			}
116		},
117
118		/**
119		 * 清除掉滚动新闻绑定的关联事件
120		 */
121		destroy : function() {
122			this.stop();
123			var container = $(this.container);
124			container.onmouseover = null;
125			container.onmouseout = null;
126			delete this.div1;
127			delete this.div2;
128		}
129	};
130})();