纯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>.
相关推荐
88274956 2020-11-03
runner 2020-09-01
梦的天空 2020-08-25
移动开发与培训 2020-08-16
ReunionIsland 2020-08-16
lyqdanang 2020-08-16
MyNameIsXiaoLai 2020-07-08
星辰的笔记 2020-07-04
csstpeixun 2020-06-28
letheashura 2020-06-26
liaoxuewu 2020-06-26
sunzhihaofuture 2020-06-21
FEvivi 2020-06-16
坚持着执着 2020-06-16
waterv 2020-06-14
xiaoge00 2020-06-14
firejq 2020-06-14
firstboy0 2020-06-14
e度空间 2020-06-12
zhongweinan 2020-06-10