zoukankan      html  css  js  c++  java
  • 滚动表格代码

    HTML:

                <div class="main">
                    <ul class="tab">
                        <li>
                            <span style=" 36%;margin-right: 1%;">润泽小区噪声点</span>
                            <span style=" 20%;margin-right: 1%;">10-29 17:00</span>
                            <span style=" 10%;margin-right: 4%;">54.1</span>
                            <span style=" 10%;margin-right: 6%;">55</span>
                            <span style=" 10%;margin-right: 0%;">0.23</span>
                        </li>
                        
                        <li>
                            <span style=" 36%;margin-right: 1%;">润泽小区噪声点</span>
                            <span style=" 20%;margin-right: 1%;">10-29 17:00</span>
                            <span style=" 10%;margin-right: 4%;">54.1</span>
                            <span style=" 10%;margin-right: 6%;">55</span>
                            <span style=" 10%;margin-right: 0%;">0.23</span>
                        </li>
                        
                        <li>
                            <span style=" 36%;margin-right: 1%;">润泽小区噪声点</span>
                            <span style=" 20%;margin-right: 1%;">10-29 17:00</span>
                            <span style=" 10%;margin-right: 4%;">54.1</span>
                            <span style=" 10%;margin-right: 6%;">55</span>
                            <span style=" 10%;margin-right: 0%;">0.23</span>
                        </li>
                        
                        <li>
                            <span style=" 36%;margin-right: 1%;">润泽小区噪声点</span>
                            <span style=" 20%;margin-right: 1%;">10-29 17:00</span>
                            <span style=" 10%;margin-right: 4%;">54.1</span>
                            <span style=" 10%;margin-right: 6%;">55</span>
                            <span style=" 10%;margin-right: 0%;">0.23</span>
                        </li>
                        
                        <li>
                            <span style=" 36%;margin-right: 1%;">润泽小区噪声点</span>
                            <span style=" 20%;margin-right: 1%;">10-29 17:00</span>
                            <span style=" 10%;margin-right: 4%;">54.1</span>
                            <span style=" 10%;margin-right: 6%;">55</span>
                            <span style=" 10%;margin-right: 0%;">0.23</span>
                        </li>
                        
                        <li>
                            <span style=" 36%;margin-right: 1%;">润泽小区噪声点</span>
                            <span style=" 20%;margin-right: 1%;">10-29 17:00</span>
                            <span style=" 10%;margin-right: 4%;">54.1</span>
                            <span style=" 10%;margin-right: 6%;">55</span>
                            <span style=" 10%;margin-right: 0%;">0.23</span>
                        </li>
                        
                        <li>
                            <span style=" 36%;margin-right: 1%;">润泽小区噪声点</span>
                            <span style=" 20%;margin-right: 1%;">10-29 17:00</span>
                            <span style=" 10%;margin-right: 4%;">54.1</span>
                            <span style=" 10%;margin-right: 6%;">55</span>
                            <span style=" 10%;margin-right: 0%;">0.23</span>
                        </li>
                        
                        <li>
                            <span style=" 36%;margin-right: 1%;">润泽小区噪声点</span>
                            <span style=" 20%;margin-right: 1%;">10-29 17:00</span>
                            <span style=" 10%;margin-right: 4%;">54.1</span>
                            <span style=" 10%;margin-right: 6%;">55</span>
                            <span style=" 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设置:

    其他版本的JS代码:

    function Marquee(opt) {
        let MyMarhq;
        clearInterval(MyMarhq);
        let tagName = $('.' + opt.name);
        let tblTop = 0;
        let speedhq = opt.speed || 20;
        let outerHeight = tagName.outerHeight();
        let children_Height = tagName.children().height()
        tagName.scrollTop(0)
        if (children_Height > outerHeight) {
            tagName.children().html(tagName.children().html() + tagName.children().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);
            })
        }
    }
  • 相关阅读:
    POJ 3261 Milk Patterns (求可重叠的k次最长重复子串)
    UVaLive 5031 Graph and Queries (Treap)
    Uva 11996 Jewel Magic (Splay)
    HYSBZ
    POJ 3580 SuperMemo (Splay 区间更新、翻转、循环右移,插入,删除,查询)
    HDU 1890 Robotic Sort (Splay 区间翻转)
    【转】ACM中java的使用
    HDU 4267 A Simple Problem with Integers (树状数组)
    POJ 1195 Mobile phones (二维树状数组)
    HDU 4417 Super Mario (树状数组/线段树)
  • 原文地址:https://www.cnblogs.com/xiejn/p/13909533.html
Copyright © 2011-2022 走看看