立可得智能看板 ---监控面板滚动

效果图

 

html部分

js部分

<script>
    // 实现监控滚动
    (function () {
        // 切换
        $('.monitor').on('click', '.tabs a', function () {
            $(this).addClass('active').siblings().removeClass('active')
            $('.monitor .content').eq(this.dataset.index).show().siblings('.content').hide()
        })
        // 动画
        $('.marquee').each(function () {
            var $cloneList = $(this).children().clone()
            $(this).append($cloneList)
        })
    })();
</script>

css部分

<style>
    /* 基础布局 */
    body {
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        padding: 0;
        font-size: 0.5rem;
        line-height: 1.15;
        background: url(./images/bg.jpg) no-repeat 0 0 / cover;
    }

    h4,
    h3,
    ul {
        margin: 0;
        padding: 0;
        font-weight: normal;
    }

    ul {
        list-style: none;
    }

    a {
        text-decoration: none;
    }

    .viewport {
        max-width: 1920px;
        min-width: 1024px;
        margin: 0 auto;
        min-height: 780px;
        padding: 3.667rem 0.833rem 0;
        background: url(./images/logo.png) no-repeat 0 0 / contain;
        display: flex;
    }

    .column {
        flex: 3;
        position: relative;
    }

    .column:nth-child(2) {
        flex: 4;
        margin: 1.333rem 0.833rem 0;
    }

    /* 面板样式 */
    .panel {
        box-sizing: border-box;
        border: 2rem solid transparent;
        border-width: 2.125rem 1.583rem 0.833rem 5.5rem;
        border-image: url(./images/border.png) 51 38 21 132;
        margin-bottom: 0.833rem;
        position: relative;
    }

    .panel .inner {
        padding: 1rem 1.5rem;
        position: absolute;
        top: -2.125rem;
        right: -1.583rem;
        bottom: -0.833rem;
        left: -5.5rem;
    }

    .panel h3 {
        font-size: 0.833rem;
        color: #fff;
    }

    /* 监控区域 */
    .monitor {
        height: 20rem;
    }

    .monitor .inner {
        padding: 1rem 0;
        display: flex;
        flex-direction: column;
    }

    .monitor .tabs {
        padding: 0 1.5rem;
        margin-bottom: 0.75rem;
        display: flex;
    }

    .monitor .tabs a {
        color: #1950c4;
        font-size: 0.75rem;
        padding: 0 1.125rem;
    }

    .monitor .tabs a:first-child {
        padding-left: 0;
        border-right: 0.083rem solid #00f2f1;
    }

    .monitor .tabs a.active {
        color: #fff;
    }

    .monitor .content {
        flex: 1;
        position: relative;
        display: none;
    }

    .monitor .head {
        display: flex;
        justify-content: space-between;
        line-height: 1.05;
        background-color: rgba(255, 255, 255, 0.1);
        padding: 0.5rem 1.5rem;
        color: #68d8fe;
        font-size: 0.583rem;
    }

    .monitor .row {
        display: flex;
        justify-content: space-between;
        line-height: 1.05;
        font-size: 0.5rem;
        color: #61a8ff;
        padding: 0.5rem 1.5rem;
    }

    .monitor .row .icon-dot {
        position: absolute;
        left: 0.64rem;
        opacity: 0;
    }

    .monitor .row:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #68d8fe;
    }

    .monitor .row:hover .icon-dot {
        opacity: 1;
    }

    .monitor .col:first-child {
        width: 3.2rem;
    }

    .monitor .col:nth-child(2) {
        width: 8.4rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .monitor .col:nth-child(3) {
        width: 3.2rem;
    }

    /* 动画 */
    .monitor .marquee-view {
        position: absolute;
        width: 100%;
        top: 1.6rem;
        bottom: 0;
        overflow: hidden;
    }

    .monitor .marquee {
        animation: scroll-top 15s linear infinite;
    }

    .monitor .marquee:hover {
        animation-play-state: paused;
    }

    @keyframes scroll-top {
        0% {}

        100% {
            transform: translateY(-50%);
        }
    }
</style>

背景图