滾動公告（縱向）
阿新 • • 發佈：2018-11-27
<!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>