javascript 向上滚动公告、水平滚动公告(翻页效果)

最新推荐文章于 2021-09-14 10:22:42 发布

最新推荐文章于 2021-09-14 10:22:42 发布 · 429 阅读

文章标签：

#公告 #JavaScript #EXT #UP #HTML #ViewUI

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个可在Ext平台上使用的滚动公告栏实现方案，支持横向和纵向滚动，并可根据用户需求切换滚动方向。通过JavaScript实现了纯浏览器环境下的滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做项目时，公司要在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(marqueeInterval[1]);
					leafscroll();
					return;
				}
				var marqueeBox = document.getElementById("marqueeBox");

				if (noticeArray[marqueeId])
					var str = "<a onclick='javascript:new UICtrl.ShowNoNotice("
							+ noticeArray[marqueeId][0]
							+ ");' style='cursor:pointer;'>"
							+ noticeArray[marqueeId][1] + "</a>";

				if (noticeArray[0][0] == "-1")
					str = noticeArray[0][1];

				marqueeId++;
				if (marqueeId >= noticeArray.length)
					marqueeId = 0;

				if (marqueeBox.childNodes.length == 1) {
					var nextLine = document.createElement('DIV');
					nextLine.innerHTML = str;
					nextLine.style.width = marqueeWidth;
					marqueeBox.appendChild(nextLine);
				} else {
					marqueeBox.childNodes[0].innerHTML = str;
					marqueeBox.appendChild(marqueeBox.childNodes[0]);
					marqueeBox.scrollTop = 0;
				}
				marqueeBox.onmouseover = function() {
					Ext.TaskMgr.stop(marqueeInterval[0])
				}
				marqueeBox.onmouseout = function() {
					Ext.TaskMgr.start(marqueeInterval[0]);
				}
				// /marqueeBox.onclick = function() {
				// /new UICtrl.ShowNoNotice();
				// /}
				if (marqueeInterval[1])
					Ext.TaskMgr.stop(marqueeInterval[1]);
				marqueeInterval[1] = new Ext.TaskMgr.start({
					run : function() {
						var marqueeBox = document.getElementById("marqueeBox");
						marqueeBox.scrollTop++;
						if (marqueeBox.scrollTop % marqueeHeight == (marqueeHeight - 1)) {
							Ext.TaskMgr.stop(marqueeInterval[1]);
						}
					},
					interval : 20
				});
			},
			interval : 3000
		});
	}
	return [noticeTxt];
}

今天下班没有什么干，于是将上面的Ext的滚动公告功能做了一些修改。做成一个纯JS的版本。
以下是js的版本代码:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>滚动公告(横向/纵向)</title>

</head>
<body style="margin: 5px;">
<div>
	<button onclick="left()">横向滚动</button>
	<button onclick="up()">纵向滚动</button>
</div>
<div id="noticeBar">notice</div>
<hr>
<script type="text/javascript" language="javascript">
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;// 公告数量

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 = 'left';// 滚动方向up/left up为向上滚动，left为向左滚动
var separator = "    <font color='#999999'>●</font>    ";

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="alert(' + 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;margin:5px;border:2px solid #1d953f;font-size:12px;color:red;"><div style="float:left;width: 800%;"><div id="notice1" style="float:left;">'
			+ str + '</div><div id="notice2" style="float:left;">' + str
			+ '</div></div></div>';

	var noticeBar = document.getElementById("noticeBar");
	noticeBar.innerHTML = noticeDiv

	marqueeInterval[3] = window.setInterval(LeftStartFn, 10);

	function LeftStartFn() {
		if (dir == "up") {
			noticeBar.innerHTML = "";
			window.clearInterval(marqueeInterval[3]);
			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() {
			window.clearInterval(marqueeInterval[3])
		};
		marqueeBox.onmouseout = function() {
			marqueeInterval[3] = window.setInterval(LeftStartFn, 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;margin:5px;border:2px solid #1d953f;font-size:12px;color:red;"><div>'
			+ str + '</div></div>';

	var noticeBar = document.getElementById("noticeBar");
	noticeBar.innerHTML = noticeDiv

	marqueeInterval[0] = window.setInterval(upStartFn, 3000);

	function upStartFn() {

		if (dir == "left") {
			noticeBar.innerHTML = "";
			window.clearInterval(marqueeInterval[0]);
			window.clearInterval(marqueeInterval[1]);
			leafscroll();
			return;
		}
		var marqueeBox = document.getElementById("marqueeBox");

		if (noticeArray[marqueeId])
			var str = "<a onclick='javascript:alert("
					+ noticeArray[marqueeId][0]
					+ ");' style='cursor:pointer;'>"
					+ noticeArray[marqueeId][1] + "</a>";

		if (noticeArray[0][0] == "-1")
			str = noticeArray[0][1];

		marqueeId++;
		if (marqueeId >= noticeArray.length)
			marqueeId = 0;

		if (marqueeBox.childNodes.length == 1) {
			var nextLine = document.createElement('DIV');
			nextLine.innerHTML = str;
			nextLine.style.width = marqueeWidth;
			marqueeBox.appendChild(nextLine);
		} else {
			marqueeBox.childNodes[0].innerHTML = str;
			marqueeBox.appendChild(marqueeBox.childNodes[0]);
			marqueeBox.scrollTop = 0;
		}
		marqueeBox.onmouseover = function() {
			window.clearInterval(marqueeInterval[0])
		}
		marqueeBox.onmouseout = function() {
			marqueeInterval[0] = window.setInterval(upStartFn, 3000);
		}

		if (marqueeInterval[1])
			window.clearInterval(marqueeInterval[1]);
		marqueeInterval[1] = window.setInterval(scrollFn, 10);
	}

	function scrollFn() {
		var marqueeBox = document.getElementById("marqueeBox");
		marqueeBox.scrollTop++;
		if (marqueeBox.scrollTop % marqueeHeight == (marqueeHeight - 1)) {
			window.clearInterval(marqueeInterval[1]);
		}
	}
}
function left() {
	dir = 'left';
}

function up() {
	dir = 'up';
}
</script>
</body>
</html>