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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现滚动条滚动到某个位置便自动定位某个tr

    js实现滚动条滚动到某个位置便自动定位某个tr

    要实现带滚动条的table,定位到某个tr,其实是很简单的,只有几行js代码就可以完成,具体内容如下 js代码 <strong><script type="text/javascript"> function test(){ var $objTr = $("#location"); //找到要定位的地方 tr $objTr.css("background-color","lightgray"); //设

  • js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 别忘了引用jquery类库 $(window).scroll(functi

  • 基于AngularJS实现页面滚动到底自动加载数据的功能

    要实现这个功能,可以通过 https://github.com/sroze/ngInfiniteScroll 这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序 http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改

  • JS JQUERY实现滚动条自动滚到底的方法

    设置页面加载时滚动条自动滚到底的方法: jQuery: 复制代码 代码如下: $(function(){   var h = $(document).height()-$(window).height();   $(document).scrollTop(h); }); JavaScript: 复制代码 代码如下: window.onload = function(){   var h = document.documentElement.scrollHeight || document.bod

  • 原生JS实现列表内容自动向上滚动效果

    原生JS实现列表内容自动向上滚动效果

    效果展示 (鼠标移入,滚动停止:鼠标移出,滚动继续) 实现原理 1. html结构:核心是ul > li,ul外层包裹着div.因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容的ul.如下图:    (红色边框为可视区域div,此处为了方便查看效果去除overflow:hidden:) 2. 样式方面:由于要滚动,所以必须2个ul的高度 > 外层可视div高度,且div必须设置overflow:hidden; 代码实现 HTML: <div id="revie

  • JS实现的新闻列表自动滚动效果示例

    JS实现的新闻列表自动滚动效果示例

    本文实例讲述了JS实现的新闻列表自动滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #box{width:260px;height:100px;margi

  • 当滚动条滚动到页面底部自动加载增加内容的js代码

    1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码 代码如下: //获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.s

  • JS实现div内部的文字或图片自动循环滚动代码

    复制代码 代码如下: <style type="text/css"> .content{width:500px;height:300px;position:absolute;left:200px;top:100px;border:solid 2px red;padding:10px;overflow:hidden} dl{width:400px;height:30px;border:1px solid black;} </style> <div class

  • javascript实现图片左右滚动效果【可自动滚动，有左右按钮】

    本文实例讲述了javascript实现图片左右滚动效果.分享给大家供大家参考,具体如下: html代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <

  • js固定DIV高度,超出部分自动添加滚动条的简单方法

    复制代码 代码如下: function setheight()     {     var div=document.getElementById("event_basicInfo");     //div.style.width="40%";     div.style.height=400;     div.style.overflow="auto";     }     window.onload=setheight;

随机推荐