js-字幕無縫滾動

weixin_33912246發表於2019-01-29
JS

  • 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);
}

相關文章