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

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

这篇文章主要介绍使用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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

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

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

CSS让页面平滑滚动

在PC浏览器中,网页默认滚动是在<html>标签上的,移动端大多数在<body>标签上,业界浏览器的CSS reset都可以加上这么一条规则:凡是需要滚动的地方都加一句scroll-behavior:smooth就好了!

H5中滚动到底部的事件

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

jquery扩展方法:实现模拟Marquee无限循环滚动

在一些网站的公告栏有这样的一个效果,如果有多条公告就会出现上下滚动效果【也叫做跑马灯效果】,这是如何实现的呢?下面通过基于jquery的扩展

90行代码,15个元素实现无限滚动

在本篇文章你将会学到:IntersectionObserver API 的用法,以及如何兼容。如何在 React Hook 中实现无限滚动。如何正确渲染多达10000个元素的列表。无限下拉加载技术使用户在大量成块的内容面前一直滚动查看

js实现返回顶部效果的方法总结

当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个返回顶部的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验。

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

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

原生js获取浏览器获X轴,Y轴的滚动距离

在前端开发中,需要获取浏览器滚动距离的需求,这篇文章主要讲解如何使用原生Js兼容实现获取浏览器获X轴,Y轴的滚动距离。并延伸扩展下我们一些不知道的js知识,希望对你有所帮助。

解决多个window.onscroll覆盖的问题

默认一个页面只能同时存在一个window.onscroll函数。有的时候我们会引入工具的js框架,在框架中使用onscroll统一监听每个页面,但是在某个页面,我们可能还要使用onscroll来监控滚动条,完成具体某个业务逻辑,这是该怎么做呢?

js+css 实现 滚动条滑动时显示,不滑动时隐藏

把原有的滚动条隐藏,创建个新的滚动条,并拓展其宽度,达到隐藏的效果,而判断滚动条是否滚动,保存原有的滚动条到顶部的距离,看是否发生改变,做出相应的判断。

点击更多...

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