通告栏横向滚动

本博客介绍了一个公告栏的实现方式,包括公告的滚动显示、鼠标悬停暂停自动滚动以及点击公告打开新页面的功能。

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

<div class="board abs">
<div class="wrap notice_web rel">
<div class="notice_tit">公告栏:</div>
<div class="notice_con">
<%
if(bulletinPage!=null && bulletinPage.getData()!=null){
for(int i=0;i<bulletinPage.getData().size(); i++){
Bulletin bulletin = bulletinPage.getData().get(i);
%>
<a><%=StringEscapeUtils.escapeHtml(bulletin.getBulletin_msg_cn())%></a>
<%
}
}
%>
</div>
</div>

</div>



//notice
autoNotice = setInterval(function(){runNotice();},10);
$(".notice_con").mouseenter(function(){
clearInterval(autoNotice);
});
$(".notice_con").mouseleave(function(){
autoNotice = setInterval(function(){runNotice();},10);
});
$(".notice_con a").click(function(){
openWindow("boardhistory.html","boardhistory",800,620,"","");
});


var noticeCur = 0;
function runNotice(){
var noticeArr = $(".notice_con a"), noticeLen = noticeArr.length;
if(noticeLen > 0){
$(noticeArr[noticeCur]).css({"margin-left":"-=1px","display":"inline-block"});
curMargin = parseInt(($(noticeArr[noticeCur]).css("margin-left").replace("px","")),10);
curWidth = $(noticeArr[noticeCur]).width();
if(curWidth + curMargin == 0){
$(noticeArr[noticeCur]).css({"margin-left":"900px","display":"none"});
noticeCur = (noticeCur == (noticeLen-1) ? 0 : (noticeCur+1));
}
}
else{
clearInterval(autoNotice);
}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值