让ul li 或者table 进行循环往上滚屏

转载:https://blog.csdn.net/u012138137/article/details/80729789

 1 <div style="display:inline">
 2 <span v-show="!showCollapse" class="icon-padding">
 3   <Icon type="ios-arrow-right"></Icon>
 4 </span>
 5 <span v-show="showCollapse" class="icon-padding">
 6   <Icon type="ios-arrow-down"></Icon>
 7 </span>
 8 </div>
 9 <!-- 上面是图标并使用div包裹显示在一行,下面是滚屏内容 -->
10   <div  id="scroll-message" class="scroll-message-style">
11       <ul>
12           <li>发现CNVD-2018-01031IBM WebSphere Portal跨站脚本漏洞,请尽快自查</li>
13           <li>跨站脚本漏洞,请尽快自查</li>
14           <li>发现CNVD-2018-01031IBM WebSphere Portal跨站脚本漏洞,请尽快自查</li>
15           <li>跨站脚本漏洞,请尽快自查</li>
16           <li>发现CNVD-2018-01031IBM WebSphere Portal跨站脚本漏洞,请尽快自查</li>
17           <li>跨站脚本漏洞,请尽快自查</li>
18           <li>发现CNVD-2018-01031IBM WebSphere Portal跨站脚本漏洞,请尽快自查</li>
19       </ul>
20   </div>

滚屏div的class样式: 
需要注意的是overflow:hidden跟height的值一定要设定。不然不会滚屏。

1 .scroll-message-style {
2     overflow:hidden;
3     height:30px;
4     float:right;
5     padding-right:5%;
6 }

接下是js相关的代码了: 
这段定时器代码可以当独放在一个方法中执行。每次都是获取dom上的ID,这样也有个好处是在执行期间dom节点不会一直累加。

 

setTimeout(function(){
      var table = document.getElementById("scroll-message");
       var timer = null;
       table.scrollTop = 0;
       table.innerHTML += table.innerHTML;
       function play() {
           clearInterval(timer);
           timer = setInterval(function() {
               table.scrollTop++;
               if (table.scrollTop >= table.scrollHeight / 2) {
                   table.scrollTop = 0;
               }
           }, 100);
       }
       setTimeout(play, 500);
       table.onmouseover = function() {
           clearInterval(timer)
       };
       table.onmouseout = play;
   },0)

下面是table相关的html代码,js代码跟上面一样的,只不过获取的dom元素ID改下就好,table头部相关的代码内容就不贴了。

 1 <div class="scroll-panel">
 2 <div class="table" id="scroll-table" style="top:0;">
 3            <table cellspacing="0" cellpadding="0">
 4                <tbody>
 5                    <tr v-for="item in list">
 6                        <td width="25%">{{item.creationTime}}</td>
 7                        <td width="25%">{{item.srcIp}}({{item.srcIpPlace}})</td>
 8                        <td width="25%">{{item.dstIp}}({{item.dstIpPlace}})</td>
 9                        <td width="15%">{{item.flowType}}</td>
10                        <td width="10%">{{item.severityLevel|toAttackLevel}}</td>
11                    </tr>
12                </tbody>
13            </table>
14        </div>
15    </div>
16 

18 

 1 /*表格*/
 2         .scroll-panel .table{
 3             width: 100%;
 4             background-color: rgba(21, 27, 99, 0.21);
 5             position: absolute;
 6             margin: auto;
 7             top: 50px;
 8             left:0;
 9             right:0;
10             bottom: 0;
11         }
12         .scroll-panel{
13            position:relative;
14            width:100%;
15            height:100%;
16            margin:auto;
17            overflow:hidden;
18         }
19         .table{
20             width:100%;
21             height:auto;
22             overflow: hidden;
23         }
24 

 

posted @ 2018-09-29 19:15  假装自己是小白  阅读(613)  评论(0编辑  收藏  举报