日期:2014-05-16  浏览次数:20391 次

javascript 向上滚动公告、水平滚动公告(翻页效果)
最近做项目时,公司要在Ext的ToolBar中添加个滚动公告栏,不但要向上滚动,而且可以向左滚动。滚动方向可以由用户选择。

以下是在Ext平台下运行的,UICtrl.StatusBarNoNotice 返回个TextItem。可以直接添加到Toolbar的Items中,进行测试。
UICtrl.StatusBarNoNotice = function() {

	var noticeArray = [];
	// [id,title]
	noticeArray.push(["100", "部门周例会会议通知1"]);
	noticeArray.push(["200", "部门周例会会议通知2"]);
	noticeArray.push(["300", "部门周例会会议通知3"]);
	noticeArray.push(["400", "部门周例会会议通知4"]);
	noticeArray.push(["500", "部门周例会会议通知5"]);

	var total = noticeArray.length;// 公告数量

	// 公告栏
	var noticeTxt = new Ext.Toolbar.TextItem({
				id : 'noticeTxt',
				text : noticeArray[0][1]
			});

	if (noticeArray.length == 0)
		noticeArray.push(["-1", "今天没有公告"]);

	/***************************************************************************
	 * 公告栏 start
	 */
	var marqueeInterval = new Array();
	var marqueeId = 0;
	var marqueeDelay = 3000;// 停顿时间 (ms)
	var marqueeHeight = 16; // 公告栏高度
	var marqueeWidth = 300;// 公告栏宽度
	var dir = Sys.agentInfo.noticeScrollDir;// 滚动方向up/left up为向上滚动,left为向左滚动
	var separator = "    ●    ";

	if (dir == "left")
		leafscroll();
	else
		upscroll();

	/**
	 * 向左滚动
	 */
	function leafscroll() {
		var str = "";
		if (noticeArray[0][0] == "-1")
			return;
		for (var i = 0; i < noticeArray.length; i++) {
			str += separator;
			var item = '<a onclick="new UICtrl.ShowNoNotice('
					+ String(noticeArray[i][0]) + ')" style="cursor:pointer;">'
					+ noticeArray[i][1] + '</a>';
			str += item;
		}

		noticeDiv = '<div id="marqueeBox" style="overflow:hidden;height:'
				+ marqueeHeight
				+ 'px;width:'
				+ marqueeWidth
				+ 'px;"><div style="float:left;width: 800%;"><div id="notice1" style="float:left;">'
				+ str + '</div><div id="notice2" style="float:left;">' + str
				+ '</div></div></div>';
		if (document.getElementById("noticeTxt")) {
			var noticeText = document.getElementById("noticeTxt");
			noticeText.innerHTML = noticeDiv;
		} else
			noticeTxt.text = noticeDiv;

		var mytask = new Ext.TaskMgr.start({
					run : function() {
						var noticeText = document.getElementById("noticeTxt");
						// noticeText.innerHTML = noticeDiv;

						var dir1 = Sys.agentInfo.noticeScrollDir;
						if (dir1 == "up") {
							noticeText.innerHTML = "";
							Ext.TaskMgr.stop(mytask);
							upscroll();
							return;
						}
						var marqueeBox = document.getElementById("marqueeBox");
						var notice1 = document.getElementById("notice1");
						var notice2 = document.getElementById("notice2");

						if (notice2.offsetWidth - marqueeBox.scrollLeft <= 0)
							marqueeBox.scrollLeft -= notice1.offsetWidth
						else {
							marqueeBox.scrollLeft++;
						}
						marqueeBox.onmouseover = function() {
							Ext.TaskMgr.stop(mytask);
						};
						marqueeBox.onmouseout = function() {
							Ext.TaskMgr.start(mytask);
						};
					},
					interval : 10
				});
	}

	/**
	 * 向上滚动
	 */
	function upscroll() {
		var str = "<a onclick='javascript:new UICtrl.ShowNoNotice("
				+ noticeArray[0][0] + ");' style='cursor:pointer;'>"
				+ noticeArray[0][1] + "</a>";
		if (noticeArray[0][0] == "-1")
			str = noticeArray[0][1];
		else
			marqueeId++;

		noticeDiv = '<div id="marqueeBox" style="overflow:hidden;height:'
				+ marqueeHeight + 'px;width:' + marqueeWidth + 'px;"><div>'
				+ str + '</div></div>';

		if (document.getElementById("noticeTxt")) {
			var noticeText = document.getElementById("noticeTxt");
			noticeText.innerHTML = noticeDiv;
		} else
			noticeTxt.text = noticeDiv;

		marqueeInterval[0] = new Ext.TaskMgr.start({
			run : function() {
				var dir1 = Sys.agentInfo.noticeScrollDir;

				var noticeText = document.getElementById("noticeTxt");

				if (dir1 == "left") {
					noticeText.innerHTML = "";
					Ext.TaskMgr.stop(marqueeInterval[0]);
					Ext.TaskMgr.stop(