快捷導(dǎo)航

js實現(xiàn)公告自動滾動

更新時間：2022年05月24日 09:21:46 作者：七彩貓貓蟲

這篇文章主要為大家詳細介紹了js實現(xiàn)公告自動滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)公告自動滾動的具體代碼，供大家參考，具體內(nèi)容如下

html

<div class="test003">
? ? ? ? ? <div class="test004">
? ? ? ? ? ? <div class="testTop"><span class="span1">姓名</span>
? ? ? ? ? ? ? ?<span class="span2">狀態(tài)</span>
? ? ? ? ? ? ? ?<span class="span3">查詢積分分數(shù)</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')
? ? ? ? //復(fù)制一遍文檔
? ? ? ? var content = list.innerHTML;
? ? ? ? list.innerHTML += content;

? ? ? ? var time = 30;
? ? ? ? var timer = setInterval(up, time);

? ? ? ? function up() {
? ? ? ? ? ? //滾上去的內(nèi)容大于ul內(nèi)容高度的一半，重置高度 0
? ? ? ? ? ? if (box.scrollTop > (list.offsetHeight >> 1)) {
? ? ? ? ? ? ? ? box.scrollTop = 0
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? box.scrollTop++;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? //鼠標(biāo)移入暫停--清除定時器
? ? ? ? // box.onmouseover = function () {
? ? ? ? // ? ? clearInterval(timer)

? ? ? ? // }
? ? ? ? ///鼠標(biāo)移出繼續(xù)--啟動定時器
? ? ? ? box.onmouseout = function() {
? ? ? ? ? ? timer = setInterval(up, time);
? ? ? ? }
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: