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

来源：互联网发布：mysql教程linux 编辑：程序博客网时间：2024/05/29 08:16

2010-08-01

最近做项目时，公司要在Ext的ToolBar中添加个滚动公告栏，不但要向上滚动，而且可以向左滚动。滚动方向可以由用户选择。

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

Javascript代码

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的版本代码:

Html代码

<!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>