无间歇文字滚动_ 原生js实现新闻无间歇性上下滚动

时间: 2018-04-18阅读: 1201标签: 滚动

这篇文章主要介绍使用js实现文字无间歇性上下滚动,一些网站的公告,新闻列表使用的比较多,感兴趣的小伙伴们可以参考一下 ,代码实现如下。


html+css部分:

<style>
#moocbox{
width: 600px;
height: 22px;
border: 1px solid #ccc;
margin:60px auto;
overflow: hidden;
}
.con{
padding-left: 24px;
}
.con li{
list-style: decimal;
}
.con li a{
font-size: 14px;
}
.con li a:hover{
color: red;
}
</style>	
<div id="moocbox">
<ul id="con1" class="con">
<li><a href="#">第一张</a></li>
<li><a href="#">第二张</a></li>
<li><a href="#">第三张</a></li>
<li><a href="#">第四张</a></li>
<li><a href="#">第五张</a></li>
<li><a href="#">第六张</a></li>
<li><a href="#">第七张</a></li>
<li><a href="#">第八张</a></li>
<li><a href="#">第九张</a></li>
<li><a href="#">第十张</a></li>
<li><a href="#">第十一张</a></li>
</ul>
<ul id="con2" class="con"></ul>
</div>


js部分:

<script>
//获取外框
var area = document.getElementById("moocbox");
//获取con1
var con1 = document.getElementById("con1");
//获取con2
var con2=document.getElementById("con2");
//con2克隆con1
con2.innerhtml=con1.innerHTML;
//设置滚动的初始值为0
area.scrollTop=0;
//创建向上滚动的函数
function scrollUp(){
area.scrollTop++;
//判断
if(area.scrollTop >= con1.offsetHeight){
area.scrollTop = 0;
}else{
area.scrollTop++;
}
}
//将滑动的速度保存为一个变量
var speed = 200;
//使用定时器,速度为50
var myScroll = setInterval("scrollUp()",speed);
//鼠标移入清除定时器
area.onmouseover = function(){
clearInterval(myScroll);
}
//鼠标移出,添加定时器
area.onmouseout = function(){
myScroll = setInterval("scrollUp()",speed);
}
</script>



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/659

关于滚动贯穿的解决方案

当前容器已经滚动到底部或者顶部,无法再滚动,容器会默认选择上层容器进行滚动,可以说滚动贯穿并非是一个bug,只是一种现象

三种方式实现平滑滚动页面到顶部的功能

最近开发公司的公众号H5,做了一个点击icon滚动到顶部的功能。实现功能比较简单,直接调用window.scrollTo(0, 0),一行代码完成。但是作为一个攻城狮,怎么可能对自己要求这么低,所以我给自己加了个需求

JS 判断元素是否可以滚动

今天在解决 ios 移动端滚动穿透的问题时遇到一个问题,就是判断元素能否滚动,把这个过程记录下来。以下以纵向滚动为例,横向滚动同理。scrollHeight 是一个元素内容高度的度量,包括由于溢出导致的视图中不可见的内容

H5中滚动到底部的事件

在H5中,我们有这样的需求:例如有列表的时候,滚动到底部时,需要加载更多。可以采用window的滚动事件进行处理,如果滚动是针对整个屏幕而言的(不针对于某个界面小块),那么这个应该是是成立的

js将滚动条scrollbar保持在最顶/底部

在某些场景中,我们通常会遇到需要将滚动条保持在顶/底部,比如:在线客服聊天对话中,始终让聊天对话框保持在最底部使得能一直看到最新的聊天记录

css、js实现自定义滚动条的两种方式

一般默认的滚动条会比较丑,我们可以利用css或者js来实现实现自定义滚动条的功能; 下面就整理2种实现方式

html页面滚动加载,可视区域判断

一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色

js如何实现滚动到一定位置将内容固定在页面顶部

window.onscroll为滚轮监听,document.body.scrollTop||document.documentElement.scrollTop 写两个是为了兼容不同浏览器。固定位置的top要设为负值,原因不明,若为0则会跟上方有空隙。左右位置虽然是0也要设,不然若为不是100%宽度的内容会出现左右跳动。

Js获取滚动的头部距离和左边距离

Js获取滚动的头部距离和左边距离:在js中,经常会用到需要获取头部距离和左边距离的小功能,在这里封装一下,以后可以直接调用即可:

原生JS实现滚动条

可视内容区的高度 / 内容区的实际高度 = 滚动条的高度 / 滑道的高度;内容区距离顶部的距离 / (内容区的实际高度 - 可视内容区域的高度 ) = 滚动条距离顶部的距离 / ( 滑道的高度 - 滚动条的高度)

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!