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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了TypeScript中字符串的常用操作，例如substring、indexOf、slice、replace等，感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
这篇文章主要给大家介绍了关于js中join()方法的相关资料,join方法用于把数组中的所有元素放入一个字符串,文中通过代码以及图文介绍的非常详细,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了微信小程序如何修改本地缓存key中单个数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了javascript 事件处理示例分享,需要的朋友可以参考下2014-12-12
react-router-dom v6 通过outlet实现keepAlive 功能的实现
本文主要介绍了react-router-dom v6 通过outlet实现keepAlive功能，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
之前的弹出层做的挺好，但是代码结构有问题，这次用到了，重构了一下，改为jQuery的插件形式，感觉还不错，有兴趣的朋友可以参考下，希望可以帮助到你2013-04-04
这篇文章主要为大家详细介绍了JS+Canvas实现动态时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
对话框，大家对这个词汇可谓是各有所解，本文有个不错的例子，里面包含了各种常见对话框的实现，感兴趣的朋友可以了解下2013-09-09
这篇文章主要介绍了微信小程序 生成携带参数的二维码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值2019-10-10
主要是获取页面元素的一些信息，所以明名为window.js,想要学习的朋友可以参考下。2009-12-12
最新评论