HTML代码:
<div id="top_message">
<span style="font-size:19px; position:absolute;">☞</span>
<ul id="uuTxt">
<li><a href="#">四年延保,大学放肆耍!</a></li>
<li><a href="#">MOTO首发,你还在等什么?</a></li>
<li><a href="#">注册会员即送乐豆,评论、晒单乐豆十倍送,100乐豆=1元哦!</a></li>
</ul>
</div>
CSS代码:
#top_message{font-size:13px; border-bottom:1px solid #ccc; height:86px; overflow:hidden;}
#top_message a{color:#000; display:block; text-indent:2em; line-height:20px;
padding-top:5px; height:86px;}
#top_message a:hover{color:#F00;}
JS代码:
// 公告栏文字向上滚动
var uuTxt = document.getElementById("uuTxt");
var roll = 0; //滚动距离
function scrollTop() {
roll -= 10;
uuTxt.style.marginTop = roll + "px";
if (roll < -182) {
roll = 91
}
}
//定时器滚动
var timer = setInterval(scrollTop, 400);
//鼠标悬停清除定时器
uuTxt.onmouseover = function() {
clearInterval(timer);
}
//鼠标离开启动定时器
uuTxt.onmouseout = function() {
timer = setInterval(scrollTop, 400);
}