js實現滾動功能---公告欄
阿新 • • 發佈:2019-02-11
最近找工作找的頭昏腦脹,突然發現自己之前是多麼的幸福。。。。
閒下來,充實我的部落格
滾動公告欄
滾動公告欄,之前在畢設中就實現過一次,現在翻出來重新寫一次。
原理:div公告欄(#part2)設定具體寬高,並設定溢位隱藏,這個地方就是我們公告展示的地方。在公告欄中有兩個div,一個用來放置我們的公告內容,另一個用來填補當公告一滾動完時,中間空出來的一小塊空間。
注:紅色為公告欄,棕色為公告一。
公告迴圈滾動是當公告一完全走完公告欄時,再將公告欄的scrollTop重新置0,從而使公告一重新再次滾動。而當公告一最後一條公告開始從公告欄向上滾動時,由於此時並沒有重置srcollTop,將會有一段為空白(就是圖中綠色部分),所以需要公告二暫時填充一會。
程式碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>公告滾動</title>
<style type="text/css">
.case {
position: absolute;
width: 800px;
height: 30px;
overflow: hidden;
left : calc(50% - 400px);
top: 150px;
}
.case .part1 {
float: left;
width: 5%;
height: 30px;
}
.case .part1 img {
width: 20px;
height: 20px;
float: right;
margin-top: 5px;
}
.case .part2 {
float: left;
width: 93%;
height: 30px;
text-indent: 1em;
overflow: hidden;
}
#part2 ul {
width: 100%;
height: auto;
list-style: none;
padding: 0;
margin: 0;
}
#part2 ul li {
width: 100%;
height: 30px;
font-size: 16px;
line-height: 30px;
color: #575757;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="case">
<div class="part1">
<img src="../img/notice.png">//一個喇叭的圖片
</div>
<div class="part2" id="part2">
<div id="scroll1">
<ul>
<li>不要被別人表現出來的毫不費力所迷惑,你要知道,那些信手拈來的東西,一定有拼盡全力作為支撐。</li>
<li>這個世界上,天才好像真的沒有那麼多。</li>
<li>而我希望,自己也可以在別人看不見的地方不動聲色的努力,在關鍵時刻出其不意的傲嬌綻放。</li>
<li>這個年紀我不在將就。</li>
</ul>
</div>
<div id="scroll2"></div>
</div>
</div>
<script type="text/javascript">
var PartArea = document.getElementById('part2');
var Scroll1 = document.getElementById('scroll1');
var Scroll2 = document.getElementById('scroll2');
Scroll2.innerHTML = Scroll1.innerHTML;
function roll() {
if(Scroll2.offsetHeight - PartArea.scrollTop <= 0) {
PartArea.scrollTop -= Scroll1.offsetHeight;
} else {
PartArea.scrollTop++;
}
}
var StopRoll = setInterval(roll, 60);
PartArea.onmouseover = function () {
clearInterval(StopRoll);
}
PartArea.onmouseout = function () {
StopRoll = setInterval(roll, 60);
}
</script>
</body>
</html>
**可執行程式碼