javascript向上スクロール公告、水平スクロール公告(ページ効果)

13926 ワード

JavaScript html ext 公告する UP。

最近プロジェクトをする時、会社はExtのToolBarにスクロールバーを追加します.上にスクロールするだけでなく、左にスクロールできます.スクロール方向はユーザによって選択できます.
以下はExtプラットフォームで動作します.UICtrl.Status BarNoticeは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 = "&nbsp;&nbsp;&nbsp;&nbsp;●&nbsp;&nbsp;&nbsp;&nbsp;";

	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 = "&nbsp;&nbsp;&nbsp;&nbsp;<font color='#999999'>●</font>&nbsp;&nbsp;&nbsp;&nbsp;";

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>

JavaScript検証テキストボックスは数字のみ入力できます.