java公告栏js资源_javascript制作滚动公告栏

于 2021-02-28 02:46:39 发布
阅读量616 收藏
点赞数
文章标签： java公告栏js资源
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_29894169/article/details/114854680
版权

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

在页面中添加滚动公告栏，不但要向上滚动，而且可以向左滚动。滚动方向可以由用户选择。

以下是在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", "今天没有公告"]);

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 

str += separator;

var item = '

+ String(noticeArray[i][0]) + ')" style="cursor:pointer;">'

+ noticeArray[i][1] + '

';

str += item;

}

noticeDiv = '

+ marqueeHeight

+ 'px;width:'

+ marqueeWidth

+ 'px;">

'

+ str + '

' + str

+ '

';

if (document.getElementByIdx_x("noticeTxt")) {

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

noticeText.innerHTML = noticeDiv;

} else

noticeTxt.text = noticeDiv;

var mytask = new Ext.TaskMgr.start({

run : function() {

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

// noticeText.innerHTML = noticeDiv;

var dir1 = Sys.agentInfo.noticeScrollDir;

if (dir1 == "up") {

noticeText.innerHTML = "";

Ext.TaskMgr.stop(mytask);

upscroll();

return;

}

var marqueeBox = document.getElementByIdx_x("marqueeBox");

var notice1 = document.getElementByIdx_x("notice1");

var notice2 = document.getElementByIdx_x("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 = "

+ noticeArray[0][0] + ");' style='cursor:pointer;'>"

+ noticeArray[0][1] + "

";

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

str = noticeArray[0][1];

else

marqueeId++;

noticeDiv = '

+ marqueeHeight + 'px;width:' + marqueeWidth + 'px;">

'

+ str + '

';

if (document.getElementByIdx_x("noticeTxt")) {

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

noticeText.innerHTML = noticeDiv;

} else

noticeTxt.text = noticeDiv;

marqueeInterval[0] = new Ext.TaskMgr.start({

run : function() {

var dir1 = Sys.agentInfo.noticeScrollDir;

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

if (dir1 == "left") {

noticeText.innerHTML = "";

Ext.TaskMgr.stop(marqueeInterval[0]);

Ext.TaskMgr.stop(marqueeInterval[1]);

leafscroll();

return;

}

var marqueeBox = document.getElementByIdx_x("marqueeBox");

if (noticeArray[marqueeId])

var str = "

+ noticeArray[marqueeId][0]

+ ");' style='cursor:pointer;'>"

+ noticeArray[marqueeId][1] + "

";

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_x('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.getElementByIdx_x("marqueeBox");

marqueeBox.scrollTop++;

if (marqueeBox.scrollTop % marqueeHeight == (marqueeHeight - 1)) {

Ext.TaskMgr.stop(marqueeInterval[1]);

}

},

interval : 20

});

},

interval : 3000

});

}

return [noticeTxt];

}

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", "今天没有公告"]);

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 = '

style="cursor:pointer;">'

+ noticeArray[i][1] +

'

';

str += item;

}

noticeDiv = '

style="overflow:hidden;height:'

+ marqueeHeight

+ 'px;width:'

+ marqueeWidth

+ 'px;">

style="float:left;">'

+ str + '

id="notice2" style="float:left;">' + str

+

'

';

if (document.getElementByIdx_x("noticeTxt")) {

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

noticeText.innerHTML = noticeDiv;

} else

noticeTxt.text = noticeDiv;

var mytask = new Ext.TaskMgr.start({

run : function() {

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

// noticeText.innerHTML = noticeDiv;

var dir1 = Sys.agentInfo.noticeScrollDir;

if (dir1 == "up") {

noticeText.innerHTML = "";

Ext.TaskMgr.stop(mytask);

upscroll();

return;

}

var marqueeBox = document.getElementByIdx_x("marqueeBox");

var notice1 = document.getElementByIdx_x("notice1");

var notice2 = document.getElementByIdx_x("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 = "

style='cursor:pointer;'>"

+ noticeArray[0][1] +

"

";

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

str = noticeArray[0][1];

else

marqueeId++;

noticeDiv = '

style="overflow:hidden;height:'

+ marqueeHeight + 'px;width:' + marqueeWidth +

'px;">

'

+ str +

'

';

if (document.getElementByIdx_x("noticeTxt")) {

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

noticeText.innerHTML = noticeDiv;

} else

noticeTxt.text = noticeDiv;

marqueeInterval[0] = new Ext.TaskMgr.start({

run : function() {

var dir1 = Sys.agentInfo.noticeScrollDir;

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

if (dir1 == "left") {

noticeText.innerHTML = "";

Ext.TaskMgr.stop(marqueeInterval[0]);

Ext.TaskMgr.stop(marqueeInterval[1]);

leafscroll();

return;

}

var marqueeBox = document.getElementByIdx_x("marqueeBox");

if (noticeArray[marqueeId])

var str = ""

+ noticeArray[marqueeId][1] +

"";

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_x('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.getElementByIdx_x("marqueeBox");

marqueeBox.scrollTop++;

if (marqueeBox.scrollTop % marqueeHeight == (marqueeHeight - 1))

{

Ext.TaskMgr.stop(marqueeInterval[1]);

}

},

interval : 20

});

},

interval : 3000

});

}

return

[noticeTxt];

}

以下是纯JS版本的代码:

Html代码

a4c26d1e5885305701be709a3d33442f.pnga4c26d1e5885305701be709a3d33442f.png

html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

滚动公告(横向/纵向)

横向滚动

纵向滚动

notice

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", "今天没有公告" ]);

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 = "    ●    ";

if (dir == "left")

leafscroll();

else

upscroll();

function leafscroll() {

var str = "";

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

return;

for ( var i = 0; i 

str += separator;

var item = '

+ ')" style="cursor:pointer;">' + noticeArray[i][1] + '

';

str += item;

}

noticeDiv = '

+ marqueeHeight

+ 'px;width:'

+ marqueeWidth

+ 'px;margin:5px;border:2px solid #1d953f;font-size:12px;color:red;">

'

+ str + '

' + str

+ '

';

var noticeBar = document.getElementByIdx_x("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.getElementByIdx_x("marqueeBox");

var notice1 = document.getElementByIdx_x("notice1");

var notice2 = document.getElementByIdx_x("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 = "

+ noticeArray[0][0] + ");' style='cursor:pointer;'>"

+ noticeArray[0][1] + "

";

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

str = noticeArray[0][1];

else

marqueeId++;

noticeDiv = '

+ marqueeHeight

+ 'px;width:'

+ marqueeWidth

+ 'px;margin:5px;border:2px solid #1d953f;font-size:12px;color:red;">

'

+ str + '

';

var noticeBar = document.getElementByIdx_x("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.getElementByIdx_x("marqueeBox");

if (noticeArray[marqueeId])

var str = "

+ noticeArray[marqueeId][0]

+ ");' style='cursor:pointer;'>"

+ noticeArray[marqueeId][1] + "

";

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_x('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.getElementByIdx_x("marqueeBox");

marqueeBox.scrollTop++;

if (marqueeBox.scrollTop % marqueeHeight == (marqueeHeight - 1)) {

window.clearInterval(marqueeInterval[1]);

}

}

}

function left() {

dir = 'left';

}

function up() {

dir = 'up';

}

高冷病友p
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值