我的位置：首页 › 一站式数据分析平台-亿信ABI › 亿信ABI-心得体验 › 大屏中新闻往上滚动效果

大屏中新闻往上滚动效果

复制链接 | 收藏本帖

2367

: 前端小姐姐小试身手Lv3

发表于2021-7-29 18:52

楼主

本帖最后由前端小姐姐于 2021-8-23 18:28 编辑

数据依次往上滚动效果，如下图所示：

实现代码如下：
html：
<div class="deaWith">
 <div class="list">
 标题1
 标题2
 标题3
 标题4
 标题5
 </div>
 <div id="deaWith">
 <ul class="newsList" id="deaWith1">
 <li class="list">
 2021.05.01
 23
 15m
 0
 0.00%
 </li>
 <li class="list">
 2021.05.02
 62
 32m
 1
 1.61%
 </li>
 <li class="list">
 2021.05.03
 55
 17m
 0
 0.00%
 </li>
 <li class="list">
 2021.05.04
 14
 9m
 0
 0.00%
 </li>
 <li class="list">
 2021.05.05
 26
 19m
 0
 0.00%
 </li>
 <li class="list">
 2021.05.06
 18
 11m
 0
 0.00%
 </li>
 <li class="list">
 2021.05.07
 33
 21m
 4
 12.12%
 </li>
 <li class="list">
 2021.05.08
 38
 22m
 0
 0.00%
 </li>
 <li class="list">
 2021.05.09
 27
 36m
 5
 18.52%
 </li>
 <li class="list">
 2021.05.10
 65
 24m
 0
 0.00%
 </li>
 <li class="list">
 2021.05.11
 45
 19m
 0
 0.00%
 </li>
 <li class="list">
 2021.05.12
 37
 26m
 1
 2.70%
 </li>
 <li class="list">
 2021.05.13
 16
 16m
 0
 0.00%
 </li>
 <li class="list">
 2021.05.14
 37
 21m
 0
 0.00%
 </li>
 <li class="list">
 2021.05.15
 42
 29m
 2
 4.76%
 </li>
 <li class="list">
 2021.05.16
 35
 22m
 0
 0.00%
 </li>
 <li class="list">
 2021.05.17
 30
 15m
 0
 0.00%
 </li>
 <li class="list">
 2021.05.18
 28
 13m
 0
 0.00%
 </li>
 <li class="list">
 2021.05.19
 18
 8m
 0
 0.00%
 </li>
 <li class="list">
 2021.05.20
 26
 34m
 0
 0.00%
 </li>
 </ul>
 <ul id="deaWith2"></ul>
 </div>
 </div>

css:
.deaWith, .quality {
width: 501px;
height: 494px;
padding: 0 20px;
background-image: url(img/title-bg3.png);
background-position: center;
background-repeat: no-repeat;
margin: 34px auto 0;
}
.list {
width: 100%;
height: 41px;
border-bottom: 1px solid rgba(73,111,252,.6);
}
div.list {
padding: 10px 0;
height: 60px;
}
#deaWith{
height: 410px;
overflow: hidden;
}
.list span {
display: block;
float: left;
line-height: 40px;
text-align: left;
font-size: 15px;
color: #88dfff;
padding: 0 6px;
}
.list .text4.red {
color: #ee4040;
position: relative;
}
.list .text4.red:before {
content: '';
position: absolute;
left: 18px;
top: 50%;
margin-top: -7px;
width: 15px;
height: 14px;
background-image: url(img/icon.png);
background-position: -178px -133px;
background-repeat: no-repeat;
}
.list .text1 {
width: 19.5%;
}
.list .text2, .list .text4 {
width: 17.3%;
margin-left: 3.5%;
}
.list .text3 {
width: 20.8%;
margin-left: 1.9%;
}
.list .text5 {
width: 15.3%;
float: right;
}

js：
<script type="text/javascript" src="jquery1.42.min.js"></script>
<script>
 $(function() {
 //新闻滚动效果
 function newScrollUp(box,con1,con2) {
 con2.innerHTML = con1.innerHTML;
 function scrollUp() {
 if (box.scrollTop >= con1.offsetHeight) {
 box.scrollTop = 0;
 } else {
 box.scrollTop++
 }
 }
 var time = 50, mytimer = setInterval(scrollUp, time);
 box.onmouseover = function() {
 clearInterval(mytimer);
 }
 box.onmouseout = function() {
 mytimer = setInterval(scrollUp, time);
 }
 }
 newScrollUp( document.getElementById('deaWith'),document.getElementById('deaWith1'),document.getElementById('deaWith2') );
 });
</script>

大屏中可以用到，做好取数，就可以展示自己想要展示的数据效果了