1. 程式人生 > 實用技巧 >滾動表格程式碼

滾動表格程式碼

HTML:

            <div class="main">
                <ul class="tab">
                    <li>
                        <span style="width: 36%;margin-right: 1%;">潤澤小區噪聲點</span>
                        <span style="width: 20%;margin-right: 1%;">10-29 17:00</span>
                        <
span style="width: 10%;margin-right: 4%;">54.1</span> <span style="width: 10%;margin-right: 6%;">55</span> <span style="width: 10%;margin-right: 0%;">0.23</span> </li> <
li> <span style="width: 36%;margin-right: 1%;">潤澤小區噪聲點</span> <span style="width: 20%;margin-right: 1%;">10-29 17:00</span> <span style="width: 10%;margin-right: 4%;">54.1</span> <
span style="width: 10%;margin-right: 6%;">55</span> <span style="width: 10%;margin-right: 0%;">0.23</span> </li> <li> <span style="width: 36%;margin-right: 1%;">潤澤小區噪聲點</span> <span style="width: 20%;margin-right: 1%;">10-29 17:00</span> <span style="width: 10%;margin-right: 4%;">54.1</span> <span style="width: 10%;margin-right: 6%;">55</span> <span style="width: 10%;margin-right: 0%;">0.23</span> </li> <li> <span style="width: 36%;margin-right: 1%;">潤澤小區噪聲點</span> <span style="width: 20%;margin-right: 1%;">10-29 17:00</span> <span style="width: 10%;margin-right: 4%;">54.1</span> <span style="width: 10%;margin-right: 6%;">55</span> <span style="width: 10%;margin-right: 0%;">0.23</span> </li> <li> <span style="width: 36%;margin-right: 1%;">潤澤小區噪聲點</span> <span style="width: 20%;margin-right: 1%;">10-29 17:00</span> <span style="width: 10%;margin-right: 4%;">54.1</span> <span style="width: 10%;margin-right: 6%;">55</span> <span style="width: 10%;margin-right: 0%;">0.23</span> </li> <li> <span style="width: 36%;margin-right: 1%;">潤澤小區噪聲點</span> <span style="width: 20%;margin-right: 1%;">10-29 17:00</span> <span style="width: 10%;margin-right: 4%;">54.1</span> <span style="width: 10%;margin-right: 6%;">55</span> <span style="width: 10%;margin-right: 0%;">0.23</span> </li> <li> <span style="width: 36%;margin-right: 1%;">潤澤小區噪聲點</span> <span style="width: 20%;margin-right: 1%;">10-29 17:00</span> <span style="width: 10%;margin-right: 4%;">54.1</span> <span style="width: 10%;margin-right: 6%;">55</span> <span style="width: 10%;margin-right: 0%;">0.23</span> </li> <li> <span style="width: 36%;margin-right: 1%;">潤澤小區噪聲點</span> <span style="width: 20%;margin-right: 1%;">10-29 17:00</span> <span style="width: 10%;margin-right: 4%;">54.1</span> <span style="width: 10%;margin-right: 6%;">55</span> <span style="width: 10%;margin-right: 0%;">0.23</span> </li> </ul> </div>

less(css):

    .main {
        width: 100%;
        height: 72.5%;
        border: 1px solid palevioletred;
        overflow: hidden;
        background-color: #000000;
        overflow-y: auto;
        overflow-x: hidden;   
        .tab{
            padding: 0;
            margin: 0 auto;
            width: 99%;
//          height: 90%;
            border: 1px solid red;
            li{
                width: 100%;
                height: 60px;
                border: 1px solid palevioletred;
                font-family: "microsoft yahei";
                font-size: 28px;
                color: #FFFFFF;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                span{
                    height: 100%;
                    border: 1px solid red;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                
            }
        }
    }

js:

    <script type="text/javascript">
        function Marquee(opt) {
            clearInterval(MyMarhq);
            let tagName = $('.'+opt.name);
            let tblTop = 0;
            let speedhq = opt.speed;
            let outerHeight = tagName.outerHeight();
            let children_Height = tagName.children('ul').height()
            tagName.scrollTop(0)
            if (children_Height > outerHeight) {
                tagName.find('ul').html(tagName.find('ul').html() + tagName.find('ul').html())
                function Marqueehq(){
                    if(parseInt(tagName.scrollTop())>= children_Height){
                        tblTop = 0;
                    } else {
                        tblTop += 1;
                    }
                    tagName.scrollTop(tblTop)
                }
                MyMarhq = setInterval(Marqueehq,speedhq);
                tagName.hover(function (){
                    clearInterval(MyMarhq);
                },function (){
                    clearInterval(MyMarhq);
                    MyMarhq = setInterval(Marqueehq,speedhq);
                })
            }
        }
        
        
        var MyMarhq;
        var myOpt = {
            name: "main",
            speed: 30,
        }
        
        new Marquee(myOpt);
    </script>

注意css設定: