`

纯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>

.

  • 大小: 27.8 KB
分享到：
| 浅谈attr()与prop()区别
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics