jq+vue列表滚动,鼠标放上去暂停,代码复制就能用

<!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列表滚动,鼠标放上去暂停,代码复制就能用

猜你喜欢
