#tableitem-biao {
// animation: scroll 10s linear infinite;
overflow: hidden;
overflow-y: auto;
height: calc(100% - 41px);
width: 100%;
}
#tablebox {
width: 100%;
height: auto;
}
中间嵌套一层tablebox盒子 里面还有细分的每一项
ScrollUp2 () {
var box = document.getElementById("tableitem-biao");
var con1 = document.getElementById("tablebox");
if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) {
box.scrollTop = 0;
} else {
box.scrollTop++;
}
},
mouseLeave2 (index) {
// this.$refs.tooltip2[index].handleClosePopper();
this.timer2 = setInterval(this.ScrollUp2, 50);
},
mouseOver2 (index) {
if (this.timer2) {
clearInterval(this.timer2);
// this.$refs.tooltip2[index].handleShowPopper();
}
},
<div id="tableitem-biao">
<div id="tablebox">
<div id="tableitem-xiang" v-for="(item,index) in tablelist" :key="index" @mouseover="mouseOver2(index)" @mouseleave="mouseLeave2(index)">
<el-tooltip effect="dark" :content="`${item.name}`" placement="top">
<div class="xiang-item">{{item.name}}</div>
</el-tooltip>
<div class="xiang-item flxclass">
{{item.level}}
</div>
<div class="xiang-item">{{item.leder}}</div>
</div>
</div>
</div>
上面是表格类的竖着滚动
下面是横向的滚动
html
<div id="TongZhi">
<div class="imgclass">
<img src="./../../../../static/img/4KHomePage/4K_TongZhi.png" alt="" />
</div>
<div class="header-notice-marquee">
<span class="header-marquee-item1">截止昨日,系统登记管网巡查人员119人,完成巡查记录487次,巡查登记问题796个。</span>
<span class="header-marquee-item2">截止昨日,系统登记管网巡查人员119人,完成巡查记录487次,巡查登记问题796个。</span>
</div>
</div>
css
#TongZhi {
width: calc(100% - 20px);
margin-left: 20px;
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
position: relative;
height: 30px;
img {
width: 26px;
height: 23px;
vertical-align: middle;
}
.header-notice-marquee {
height: 100%;
width: calc(100% - 26px);
position: relative;
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
span {
padding: 0 26px;
position: absolute;
left: 26px;
font-size: 24px;
font-family: Alibaba PuHuiTi;
font-weight: bold;
color: #ffc73f;
margin-left: 5px;
overflow: hidden;
}
}
.header-marquee-item1 {
animation: marquee1 15s linear 8;
}
.header-marquee-item2 {
animation: marquee2 15s linear 8;
}
.header-notice-marquee:hover {
animation-play-state: paused;
}
@keyframes marquee1 {
0% {
left: 4%;
}
100% {
left: -150%;
}
}
@keyframes marquee2 {
0% {
left: 150%;
}
100% {
left: 4%;
}
}
}
#TongZhi:hover {
animation-play-state: paused;
}
不过这个paused没生效就是了 暂时也没搞清楚原因