<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.case {
position: absolute;
800px;
height: 30px;
overflow: hidden;
left: calc(50% - 400px);
top: 150px;
}
.case .part1 {
float: left;
5%;
height: 30px;
}
.case .part1 img {
20px;
height: 20px;
float: right;
margin-top: 5px;
}
.case .part2 {
float: left;
93%;
height: 30px;
text-indent: 1em;
overflow: hidden;
}
#part2 ul {
100%;
height: auto;
list-style: none;
padding: 0;
margin: 0;
}
#part2 ul li {
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>