纯JS打造循环间隔滚动公告栏

最新推荐文章于 2023-01-12 22:05:09 发布

原创最新推荐文章于 2023-01-12 22:05:09 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#公告 #function #div #javascript #html #null

本文介绍了一种使用纯JavaScript实现的循环公告栏效果。公告栏能够自动切换展示不同的公告内容，并支持鼠标悬停暂停切换的功能。点击公告还能展开详细内容。

<html>

<head>

<title>纯JS打造循环间隔滚动公告栏</title>

div#scrollDiv

{

width: 100%;

height: 30px;

position: relative;

left: 0px;

top: 0px;

border: #ccc 1px solid;

overflow: hidden;

}

div#scrollDiv div

{

position: absolute;

text-align: center;

width: 100%;

height: 30px;

line-height: 30px;

top: 0px;

}

div#divContent

{

position: absolute;

text-align: left;

background-color: #606066;

}

</style>

</head>

<body>

</div>

var notice = new Array();

var scrollDiv = $("scrollDiv");

var oTime;

var moveSize = 100;

var timeSpace = 2500;

var nowNoticeIndex;

var notice1 = "内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一";

var notice2 = "内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二";

var notice3 = "内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三";

var notice4 = "内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四";

var notice5 = "内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五内容五";

var notice6 = "内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六内容六";

var notice7 = "内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七内容七";

notice[0] = new Array("notice test1 --coding by pippe pippe@163.com", notice1, 500, 400); //标题，内容，打开的DIV宽度，打开的DIV高度

notice[1] = new Array("notice test2 --coding by pippe pippe@163.com", notice2, 100, 600);

notice[2] = new Array("notice test3 --coding by pippe pippe@163.com", notice3, 400, 300);

notice[3] = new Array("notice test4 --coding by pippe pippe@163.com", notice4, 700, 500);

notice[4] = new Array("notice test5 --coding by pippe pippe@163.com", notice5, 100, 500);

notice[5] = new Array("notice test6 --coding by pippe pippe@163.com", notice6, 600, 400);

notice[6] = new Array("notice test7 --coding by pippe pippe@163.com", notice7, 300, 600);

function $(controlId)

{

return document.getElementById(controlId);

}

function setScroll(previousNoticeIndex)

{

var noticeLen = notice.length;

if (noticeLen == 0)

{

return;

}

nowNoticeIndex = previousNoticeIndex < noticeLen - 1 ? previousNoticeIndex + 1 : 0;

setEnter(nowNoticeIndex);

setQuit(previousNoticeIndex);

oTime = setTimeout("setScroll(" + nowNoticeIndex + ")", timeSpace);

}

//进入主区

function setEnter(noticeIndex)

{

var enterDiv = $("div" + noticeIndex);

if (enterDiv)

{

var thisLeft = parseInt(enterDiv.style.left);

if (thisLeft > enterDiv.enterLeft + moveSize)

{

enterDiv.style.left = (thisLeft - moveSize) + "px";

}

else

{

enterDiv.style.left = enterDiv.enterLeft;

return;

}

else

{

enterDiv = document.createElement("div");

scrollDiv.appendChild(enterDiv);

enterDiv.id = "div" + noticeIndex;

enterDiv.style.left = enterDiv.parentNode.clientWidth + "px";

enterDiv.style.cursor = "pointer";

enterDiv.innerHTML = notice[noticeIndex][0];

enterDiv.onmouseover = function() {divMouseOver()};

enterDiv.onmouseout = function() {divMouseOut()};

enterDiv.onclick = function() {divClick()};

enterDiv.enterLeft = (enterDiv.parentNode.clientWidth - enterDiv.clientWidth) /2;

enterDiv.quitLeft = -enterDiv.clientWidth;

}

setTimeout("setEnter(" + noticeIndex + ")", 20);

}

//离开主区

function setQuit(noticeIndex)

{

var quitDiv = $("div" + noticeIndex);

if (quitDiv)

{

var thisLeft = parseInt(quitDiv.style.left);

if (thisLeft > quitDiv.quitLeft + moveSize)

{

quitDiv.style.left = (thisLeft - moveSize) + "px";

}

else

{

quitDiv.style.left = quitDiv.quitLeft;

quitDiv.parentNode.removeChild(quitDiv);

quitDiv = null;

return;

}

setTimeout("setQuit(" + noticeIndex + ")", 20);

}

//鼠标经过停止切换

function divMouseOver()

{

clearTimeout(oTime);

}

//鼠标离开继续切换

function divMouseOut()

{

oTime = setTimeout("setScroll(" + nowNoticeIndex + ")", timeSpace);

}

var divContent;

var aimWidth, aimHeight, aimLeft, aimTop;

var saveWidth, saveHeight, saveLeft, saveTop;

var moveSpace = 50;

var resizeSpace = 20;

var isClose = "open"; //内容区打开与否

//点击标题显示内容

function divClick()

{

var screen_X = document.body.clientWidth;

var screen_Y = document.body.clientHeight;

aimWidth = notice[nowNoticeIndex][2] ? parseInt(notice[nowNoticeIndex][2]) : 500;

aimHeight = notice[nowNoticeIndex][3] ? parseInt(notice[nowNoticeIndex][3]) : 500;

aimLeft = (screen_X - aimWidth) / 2;

aimTop = (screen_Y - aimHeight) / 2;

saveWidth = saveWidth ? saveWidth : 50;

saveHeight = saveHeight ? saveHeight : 50;

saveLeft = saveLeft ? saveLeft : (screen_X - saveWidth) / 2;

saveTop = saveTop ? saveTop : (screen_Y - saveHeight) / 2;

//内容DIV未打开创建内容DIV

if (!divContent)

{

divContent = document.createElement("div");

divContent.id = "divContent";

divContent.style.left = (screen_X / 2) + "px";

divContent.style.top = scrollDiv.clientHeight + "px";

divContent.style.width = "50px";

divContent.style.height = "50px";

divContent.style.overflow = "auto";

document.body.appendChild(divContent);

isClose = "close";

}

else

{

isClose = "open";

}

divContent.style.filter = "alpha(opacity=50)";

reSize();

}

//自动切换到合适位置及预订的大小

function reSize()

{

var nowWidth = parseInt(divContent.style.width);

var nowHeight = parseInt(divContent.style.height);

var nowLeft = parseInt(divContent.style.left);

var nowTop = parseInt(divContent.style.top);

var thisTimeSpace = 10;

//滚动到上次的位置及大小

if (isClose == "close")

{

if (saveWidth > nowWidth + moveSpace || saveHeight > nowHeight + moveSpace || saveLeft > nowLeft + moveSpace || saveTop > nowTop + moveSpace ||

saveWidth < nowWidth - moveSpace || saveHeight < nowHeight - moveSpace || saveLeft < nowLeft - moveSpace || saveTop < nowTop - moveSpace)

{

divContent.style.width = saveWidth > nowWidth + moveSpace ? (nowWidth + moveSpace) + "px" : saveWidth < nowWidth - moveSpace ? (nowWidth - moveSpace) + "px" : saveWidth + "px";

divContent.style.height = saveHeight > nowHeight + moveSpace ? (nowHeight + moveSpace) + "px" : saveHeight < nowHeight - moveSpace ? (nowHeight - moveSpace) + "px" : saveHeight + "px";

divContent.style.left = saveLeft > nowLeft + moveSpace ? (nowLeft + moveSpace) + "px" : saveLeft < nowLeft - moveSpace ? (nowLeft - moveSpace) + "px" : saveLeft + "px";

divContent.style.top = saveTop > nowTop + moveSpace ? (nowTop + moveSpace) + "px" : saveTop < nowTop - moveSpace ? (nowTop - moveSpace) + "px" : saveTop + "px";

setTimeout("reSize()", thisTimeSpace);

return;

}

isClose = "open";

}

//滚动到预定的位置及大小

if (aimLeft > nowLeft + resizeSpace || aimLeft < nowLeft - resizeSpace)

{

divContent.style.left = aimLeft > nowLeft + resizeSpace ? (nowLeft + resizeSpace) + "px" : aimLeft < nowLeft - resizeSpace ? (nowLeft - resizeSpace) + "px" : aimLeft + "px";

setTimeout("reSize()", thisTimeSpace);

return;

}

if (aimTop > nowTop + resizeSpace || aimTop < nowTop - resizeSpace)

{

divContent.style.top = aimTop > nowTop + resizeSpace ? (nowTop + resizeSpace) + "px" : aimTop < nowTop - resizeSpace ? (nowTop - resizeSpace) + "px" : aimTop + "px";

setTimeout("reSize()", thisTimeSpace);

return;

}

if (aimWidth > nowWidth + resizeSpace || aimWidth < nowWidth - resizeSpace)

{

divContent.style.width = aimWidth > nowWidth + resizeSpace ? (nowWidth + resizeSpace) + "px" : aimWidth < nowWidth - resizeSpace ? (nowWidth - resizeSpace) + "px" : aimWidth + "px";

setTimeout("reSize()", thisTimeSpace);

return;

}

if (aimHeight > nowHeight + resizeSpace || aimHeight < nowHeight - resizeSpace)

{

divContent.style.height = aimHeight > nowHeight + resizeSpace ? (nowHeight + resizeSpace) + "px" : aimHeight < nowHeight - resizeSpace ? (nowHeight - resizeSpace) + "px" : aimHeight + "px";

setTimeout("reSize()", thisTimeSpace);

return;

}

saveWidth = aimWidth;

saveHeight = aimHeight;

saveLeft = aimLeft;

saveTop = aimLeft; //以左距为半程顶距，增大打开移动动画效果

divContent.innerHTML = "<p style="font-weight: bold">" + notice[nowNoticeIndex][0] + "</p>" + notice[nowNoticeIndex][1] + "<br/> <a href="javascript:closeContent()">关闭</a>";

divContent.style.filter = "alpha(opacity=100)";

}

function closeContent()

{

if (divContent)

{

divContent.parentNode.removeChild(divContent);

divContent = null;

}

setScroll(-1);

</script>

</body>

</html>

使用说明:

通过二维数组循环显示公告，如果为最后一条循环回第一条
循环效果为进入中间区为快速进入，停顿数秒（预设2.5秒）后快速离开中间区，同时下一条公告快速进入！
鼠标经过并且停留在公告区时，公告不进行切换，待鼠标离开后再次进行切换！
点击公告区可查看当前点击公告内容
- 如果内容DIV当前未被打开，创建一个DIV，滑动路径分为两步，第一步滑动的宽度、高度、左距、顶距分别为上一次关闭的内容区的的宽度、高度、左距、左距，如果未打开过采用默认，第二步滑动同下一条一致
- 如果内容DIV当前已打开，则调整大小及位置为将要打开的大小及位置，滑动并替换内容区主题和内容
- 内容DIV可做成可移动，参考本人上次所写的移动DIV代码，此处不提供