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

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

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

如何用js制作滚动文字?

有时候需要展示的文字较多,但是空间较少,为了能充分的利用空间,可以将文字做成自动滚动的方式。例如网页里的新闻。这里用javascript完成这个功能。

移动端滚动穿透问题解决方案

移动端有可滚动的弹窗肯定会遇到的问题,滑动弹层背景跟着滚动,如果弹窗里面的内容不需要滚动的可以直接粗暴的把滚动事件禁用掉,但是如果弹窗内容过多需要滚动那就不可以这样做。以下这个解决办法在线上使用没有问题,可以大胆拿去用

CSS:scroll-snap滚动事件停止及元素位置检测

CSS Scroll Snap是个非常好用的特性,可以让网页容器滚动停止的时候,无需任何JS代码的参与,浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯CSS实现

前端高性能滚动 scroll 及页面渲染优化

主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动。因为本文涉及了很多很多基础,是我自己学习记录的一个过程,如果上面列出的知识点都了然于胸了,就可以不必往下看了

css隐藏滚动条同时可以滚动

通过 ::-webkit-scrollbar 伪元素; 外层元素 overflow: hidden 内层元素absolute定位;父元素overflow: hidden, 子元素宽度 100% + 滚动条宽度

原生JS实现图片滚动

黑色盒子是最终显示滚动图像的区域,绿色盒子为其子容器,其宽度要大于黑色外层盒子,这样才能通过设置黑色盒子的scrollLeft实现图像的滚动。最内层的蓝色盒子用于包裹所有滚动的图像

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

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

H5中滚动到底部的事件

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

vue 无限滚动问题

如今web开发中,无限加载是必需的一项功能,尤其是在移动端开发中,一个列表往往默认只加载10条,想看更多只能逐渐往下翻页。那么今天就看看如何在Vue-Cli中实现这个功能

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

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

点击更多...

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广