<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://lib.baomitu.com/jquery/1.11.1/jquery.min.js"></script>
<script src='https://lib.baomitu.com/vue/2.6.12/vue.min.js'></script>
<style>
/*列表滚动css*/
ul.box li {
display: flex;
/* color: #fff; */
height: 30px;
}
ul.box li div {
text-align: center;
flex: 1;
line-height: 30px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
.news-scrolling-box {
width: 100%;
margin: 0 auto;
height: 100%;
position: relative;
overflow: hidden;
}
.scroll-box-c {
width: 100%;
height: 120px;
overflow: hidden;
}
.scroll-box-c ul {
list-style: none;
width: 100%;
height: 100%;
}
.scroll-box-c ul li {
width: 100%;
height: 30px;
box-sizing: border-box;
line-height: 30px;
font-size: 12px;
line-height: 30px;
display: flex;
}
/*修改列表css*/
.scroll-box-c{height: 180px;}
ul.bg-header li {background:linear-gradient(to left,#0c52bd,#196ed9,#0f8af3,#196ed9,#155ccb);font-size: 16px}
.scroll-box-c ul li{font-size: 14px}
/*修改列表css 结束*/
/*列表滚动css结束*/
</style>
</head>
<body>
<div id='app'>
<div style="margin-top: 20px">
<ul class="box bg-header">
<li>
<div>物资</div>
<div>涉及型号</div>
<div>依存等级</div>
<div>短缺数量</div>
<div>供方</div>
</li>
</ul>
<div class="news-scrolling-box">
<div class="scroll-box-c rightColor-box-c " :class="`scroll-box0`">
<ul class="box">
<li v-for="(item,index) in centerBottomList" :key="`${index}_item`">
<div class="item_new item_new_first">{{item.materialName}}</div>
<div class="item_new" >{{item.modelCode}}</div>
<div class="item_new">{{item.dependLevel}}级</div>
<div class="item_new">{{item.shortage}}</div>
<div class="item_new">{{item.orgName}}</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
centerBottomList:[{"id":1,"materialName":"单片基础电路","modelCode":"XH-1","dependLevel":1,"shortage":1000,"orgName":"XX供方","isDelete":"0"},{"id":2,"materialName":"单品集成电路(含裸芯片)","modelCode":"XH-1","dependLevel":2,"shortage":3000,"orgName":"YY供方","isDelete":"0"},{"id":3,"materialName":"弹上信息处理器","modelCode":"XH-1","dependLevel":2,"shortage":2000,"orgName":"ZZ供方","isDelete":"0"},{"id":4,"materialName":"6f1602-17leida计算机","modelCode":"XH-1","dependLevel":2,"shortage":5000,"orgName":"XX供方","isDelete":"0"},{"id":5,"materialName":"6f260202串并转换板","modelCode":"XH-1","dependLevel":2,"shortage":1000,"orgName":"YY供方","isDelete":"0"},{"id":6,"materialName":"6f5001-17发控计算机","modelCode":"XH-1","dependLevel":1,"shortage":1000,"orgName":"XX供方","isDelete":"0"},{"id":7,"materialName":"模拟训练器","modelCode":"XH-1","dependLevel":1,"shortage":4000,"orgName":"ZZ供方","isDelete":"0"},{"id":8,"materialName":"伺服机柜","modelCode":"XH-2","dependLevel":1,"shortage":1000,"orgName":"YY供方","isDelete":"0"},{"id":9,"materialName":"搜索跟踪显控组合","modelCode":"XH-2","dependLevel":2,"shortage":3000,"orgName":"XX供方","isDelete":"0"},{"id":10,"materialName":"微波放大组合","modelCode":"XH-2","dependLevel":2,"shortage":1000,"orgName":"XX供方","isDelete":"0"}]
}
})
$(function () {
//获得当前<ul>
var $uList = $(".scroll-box0 ul");
var timer = null;
//触摸清空定时器
$uList.hover(function () {
clearInterval(timer);
},
function () { //离开启动定时器
timer = setInterval(function () {
scrollList($uList);
},
3000);
}).trigger("mouseleave"); //自动触发触摸事件
//滚动动画
function scrollList(obj) {
//获得当前<li>的高度
var scrollHeight = $("ul li:first").height();
//滚动出一个<li>的高度
$uList.stop().animate({
marginTop: -scrollHeight
},
600,
function () {
//动画结束后,将当前<ul>marginTop置为初始值0状态,再将第一个<li>拼接到末尾。
$uList.css({
marginTop: 0
}).find("li:first").appendTo($uList);
});
}
});
</script>
</body>
</html>
jq+vue列表滚动,鼠标放上去暂停,代码复制就能用
最新推荐文章于 2023-11-27 13:22:22 发布