纯JS实现文字上下【渐进】滚动(不是逐行哦)

【前言】

    纯JS实现文字或新闻竖直方向滚动,先看个案例

    纯JS实现文字上下【渐进】滚动(不是逐行哦)

【主体】

    (1)JS获取数值方向滚动距离selector.scrollTop

    (2)JS获取元素高度(包含边框和内边距)selector.offectHeight

    (3)高度获取

             1、clientHeight:height+上下padding(内部可视区高度)

             2、offsetHeight:height+上下padding+上下border-width(div的可视高度)

             3、scrollHeight:内容的实际高度+上下padding(如果没有限制div的height,即height是自适应的,一般是scrollHeight==clientHeight)

             4、height:在几个浏览器中都是undefined

             5、style.height:遗憾的是只有将高度定义在元素的style属性中这个变量才有效,如果是抽取到了样式表中是无法取到的

    (4)本例中我们用到了offectHeight来获取元素高度

代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文字滚动</title>
	<style type="text/css">
		/*代码初始化*/
		*{
			margin: 0;
			padding: 0;
		}
		ul li,ol li{
			list-style-type: none;
		}
		a{
			text-decoration: none;
		}
		/*代码主体*/
		.main{
			width: 300px;
			height: 400px;
			border: 1px solid rgba(0,0,0,0.3);
			margin: 10px auto;
			box-shadow: 0 0 10px rgba(0,0,0,0.5);
			overflow-y: hidden;
		}
		.show1 li,.show2 li{
			width: 100%;
			height: 100px;
			border-bottom: 1px solid rgba(0,0,0,0.2);
			box-sizing: border-box;
			line-height: 100px;
			text-align: center;
			font-size: 26px;
			cursor: pointer;
		}
	</style>
</head>
<body>
<div class="main">
	<ul class="show1">
		<li>新闻1</li>
		<li>新闻2</li>
		<li>新闻3</li>
		<li>新闻4</li>
		<li>新闻5</li>
		<li>新闻6</li>
		<li>新闻7</li>
		<li>新闻8</li>
	</ul>
	<ul class="show2">
		
	</ul>
</div>
<script type="text/javascript">
	var main = document.getElementsByClassName("main")[0];
	var show1 = document.getElementsByClassName("show1")[0];
	var show2 = document.getElementsByClassName("show2")[0];
	var timeId;
	show2.innerHTML = show1.innerHTML;
	timeId = setInterval(play,25);
	function play(){
		if (main.scrollTop >= show1.offsetHeight) {
			main.scrollTop=0;
		}else{
			main.scrollTop++;
		}
	}
	play();
	main.onmouseover = function(){
		clearInterval(timeId)
	};
	main.onmouseout = function(){
		timeId = setInterval(play,25);
	};
</script>
</body>
</html>

.