最近找工作找的頭昏腦脹，突然發現自己之前是多麼的幸福。。。。
閒下來，充實我的博客
滾動公告欄
滾動公告欄，之前在畢設中就實現過一次，現在翻出來重新寫一次。
原理：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>**可運行代碼