js实现公告自动滚动
更新时间：2022年05月24日 09:21:46 作者：七彩猫猫虫
这篇文章主要为大家详细介绍了js实现公告自动滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现公告自动滚动的具体代码，供大家参考，具体内容如下
html
<div class="test003"> <div class="test004"> <div class="testTop"><span class="span1">姓名</span> <span class="span2">状态</span> <span class="span3">查询积分分数</span> </div> <div id="box"> <ul id="list"> <li><span class="span1">173****3856</span> <span class="span2">在11:36查询</span> <span class="span3">108分</span> <li> <li><span class="span1">139****1926</span> <span class="span2">在11:49查询</span> <span class="span3">120分</span> <li> <li><span class="span1">137****2575</span> <span class="span2">在09:59查询</span> <span class="span3">110分</span> <li> <li><span class="span1">181****6973</span> <span class="span2">在11:08查询</span> <span class="span3">120分</span> <li> <li><span class="span1">133****1728</span> <span class="span2">在13:10查询</span> <span class="span3">119分</span> <li> <li><span class="span1">186****2048</span> <span class="span2">在12:37查询</span> <span class="span3">114分</span> <li> <li><span class="span1">153****0658</span> <span class="span2">在10:22查询</span> <span class="span3">120分</span> <li> <li><span class="span1">150****3880</span> <span class="span2">在12:24查询</span> <span class="span3">120分</span> <li> <li><span class="span1">189****5792</span> <span class="span2">在11:00查询</span> <span class="span3">105分</span> <li> <li><span class="span1">157****3676</span> <span class="span2">在14:55查询</span> <span class="span3">192分</span> <li> <li><span class="span1">150****3811</span> <span class="span2">在14:25查询</span> <span class="span3">108分</span> <li> <li><span class="span1">173****4713</span> <span class="span2">在15:21查询</span> <span class="span3">109分</span> <li> <li><span class="span1">159****7114</span> <span class="span2">在14:40查询</span> <span class="span3">106分</span> <li> <li><span class="span1">180****2836</span> <span class="span2">在15:35查询</span> <span class="span3">147分</span> <li> <li><span class="span1">187****3546</span> <span class="span2">在14:17查询</span> <span class="span3">120分</span> <li> </ul> </div> </div> </div>
css
<style type="text/css">
.test001 {
width: 100%;
border-top: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
font-weight: bold;
font-size: 17px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.test002 {
margin-top: 15px;
width: 100%;
text-align: center;
font-weight: bold;
font-size: 21px;
display: flex;
justify-content: center;
align-items: center;
}
.test003 {
margin-top: 15px;
width: 100%;
/* text-align: center; */
/* font-weight: bold; */
/* font-size: 21px; */
display: flex;
justify-content: center;
/* border: solid 1px; */
flex-direction: column;
align-items: center;
}
.test004 {
/* margin-top: 15px; */
width: 90%;
/* text-align: center; */
/* font-weight: bold; */
/* font-size: 21px; */
display: flex;
justify-content: center;
border: solid 1px;
flex-direction: column;
align-items: center;
}
.testTop {
width: 90%;
font-size: 14px;
height: 30px;
display: block;
font-weight: bold;
padding-left: 20px;
padding-top: 15px;
}
.testTop span {
margin-right: 75px;
}
.testTop .span2 {
margin-right: 65px;
}
#box {
width: 90%;
height: 250px;
line-height: 2em;
/* background-color: skyblue; */
margin-top: 15px;
/* margin: 100px auto; */
padding: 0 0px;
overflow: hidden;
}
#list li {
margin-top: 10px;
list-style: none;
}
#list span {
margin-right: 30px;
font-size: 14px;
display: inline-block;
overflow: hidden;
text-align: center;
}
#list .span1 {
width: 80px;
}
#list .span2 {
margin-right: 40px;
width: 80px;
}
#list .span3 {
width: 50px;
/* margin-right: 50px; */
/* text-align: left; */
/* border: 1px solid black; */
}
/* #list a:hover {
color: orangered;
text-decoration: underline;
} */
</style>js
<script>
var box = document.getElementById('box')
var list = document.getElementById('list')
console.log(box, 'box')
//复制一遍文档
var content = list.innerHTML;
list.innerHTML += content;
var time = 30;
var timer = setInterval(up, time);
function up() {
//滚上去的内容大于ul内容高度的一半，重置高度 0
if (box.scrollTop > (list.offsetHeight >> 1)) {
box.scrollTop = 0
} else {
box.scrollTop++;
}
}
//鼠标移入暂停--清除定时器
// box.onmouseover = function () {
// clearInterval(timer)
// }
///鼠标移出继续--启动定时器
box.onmouseout = function() {
timer = setInterval(up, time);
}
</script>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
像 Ajaxian，StackOverflow 等，搜一下，到处都在讨论 isArray() 的实现。对于一切都是对象的 JavaScript 来说，确实有点麻烦2011-10-10
JavaScript中undefined和is not defined的区别与异常处理
这篇文章主要给大家介绍了关于JavaScript中undefined和is not defined的区别与异常处理的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了原生js页面滚动延迟加载图片的相关资料,现在瀑布流效果大行其道，各种网站都有应用，尤其是专业的图片类型的网站，感兴趣的朋友可以参考下2015-12-12
这篇文章主要介绍了webpack 5 联邦模块介绍，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
javascript之水平横向滚动歌词同步的应用...2007-05-05
这篇文章主要为大家详细介绍了JavaScript canvas实现雪花随机动态飘落，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要介绍了通过微信公众平台获取公众号文章的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了JavaScript控制浏览器全屏显示,结合简单实例形式分析了JavaScript响应鼠标事件控制浏览器全屏显示与退出全屏显示相关操作技巧,需要的朋友可以参考下2018-07-07
在某些情况下,我们会比TS更清楚一个数据的类型,这种时候我们就可以使用断言来告诉TS相信我,我知道自己在干什么,下面这篇文章主要给大家介绍了关于TypeScript函数和类型断言的相关资料,需要的朋友可以参考下2022-06-06
本篇文章主要是对JS操作JSON进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
最新评论