滚动公告（纵向）

<!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>
滚动公告（纵向）

猜你喜欢
