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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
JavaScript变量声明var,let.const及区别浅析
这篇文章主要介绍了JavaScript变量声明var,let.const及区别浅析,需要的朋友可以参考下2018-04-04基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
这篇文章主要介绍了基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象) 的相关资料,需要的朋友可以参考下2015-12-12
最新评论