美文网首页JavaScript前端
js-字幕无缝滚动

js-字幕无缝滚动

作者: 墨_梵 | 来源:发表于2019-01-29 09:04 被阅读0次
    • CSS

    /* 轮播文字 */
    #account_witnessList .vmWait_siwper{
        margin: 0 auto;
        margin-top: 1.07rem;
        margin-bottom: 0.9rem;
        width: 4.9rem;
        height: 0.96rem;
        line-height: 0.48rem;
        overflow: hidden;
    }
    #account_witnessList .vmWait_siwper .swiper_content{
        text-align: justify;
        color: #333333;
        min-height: 0.96rem;
    }
    
    • HTML

    <!-- 轮播文字 -->
    <div id="colee" class="vmWait_siwper">
        <div id="colee1" class="swiper_content"></div>
        <div id="colee2" class="swiper_content"></div>
    </div>
    
    • js

    // 设置轮播文字的内容
    var swiperText = [
        '1、2019年深交所将防控金融风险摆在突出重要位置,切实增强风险预研预判能力,持续完善风险处置应对措施,全力打好防范化解重大风险攻坚战;进一步夯实利率债与信用债双轮驱动格局;推动固定收益产品创新,丰富市场产品种类。',
        '2、2018年上海银保监局在风险防范上“出实招”,督促机构将逾期90天以上的贷款余额全部纳入不良,截至2018年末上海银行业不良率0.78%,在全国处于最优之列。',
        '3、财政部印发《关于创业投资企业个人合伙人所得税政策问题的通知》。创投企业可选择按单一投资基金核算或者按创投企业年度所得整体核算两种方式之一,对其个人合伙人来源于创投企业的所得计算个人所得税应纳税额。'
    ];
    for (var i = 0; i < swiperText.length; i++) {
        $("#colee1").append(swiperText[i]+'<br/>');
    }
    // 轮播的相关设置
    var swiperTimer;
    var speed = 60;
    var move = document.getElementById("colee");
    var move_1 = document.getElementById("colee1");
    var move_2 = document.getElementById("colee2");
    move_2.innerHTML = move_1.innerHTML; //克隆
    var marginTop = parseInt($('#colee').css('margin-top')) || 0;
    function Marquee1() {
        //当滚动至colee1与colee2交界时
        if((move_2.offsetTop - marginTop) <= move.scrollTop) { //小于向上
            move.scrollTop -= move_1.offsetHeight; //小于减 大于加
        } else {
            move.scrollTop++; //++ 向上 -- 向下
        }
    }
    // 如果只有一行,高度小于容器的高度,则不进行滚动轮播
    if($("#colee1").height() > $('#colee').height()){
        swiperTimer = setInterval(Marquee1, speed);
    }
    

    相关文章

      网友评论

        本文标题:js-字幕无缝滚动

        本文链接:https://www.haomeiwen.com/subject/myvtsqtx.html