滚动新闻实现

最新推荐文章于 2021-06-21 19:07:00 发布

Miya_Ye

最新推荐文章于 2021-06-21 19:07:00 发布

阅读量301

点赞数

本文链接：https://blog.csdn.net/april_4/article/details/79173385

版权

项目里做优势运价的滚动播放 html结构大概是这样的：滚动起来是缓慢的，每隔3秒，移动一次

<div className="prioLine">
        <h1>优势航线</h1>
        <div className="prioLineDetail">

            <img src="images/bookingIndex/youzhihangxian.svg"/>
            <div className="prioLinetable">
                <ul className="tableHeader">
                    <li style={{'width':'15%'}}>代理商</li>
                    <li style={{'width':'10%'}}>船公司</li>
                    <li style={{'width':'15%'}}>起运港</li>
                    <li style={{'width':'15%'}}>目的港</li>
                    <li style={{'width':'8%'}}>船期</li>
                    <li style={{'width':'8%'}}>20GP</li>
                    <li style={{'width':'8%'}}>40GP</li>
                    <li style={{'width':'8%'}}>40HC</li>
                    <li style={{'width':'95px'}}>有效日期</li>
                </ul>
                <div className="fixedPart">
                    <div id="carousel">
                        {
                        data.prioLine.map(function(item){ 
                        return(
                        <ul className="tableBody" value={item.freightId}>
                            <li style={{'width':'15%'}}>{item.supCompany}</li>
                            <li style={{'width':'10%'}}>{item.shipCompany}</li>
                            <li style={{'width':'15%'}}>{item.startPortEnName}</li>
                            <li style={{'width':'15%'}}>{item.endPortEnName}</li>
                            <li style={{'width':'8%'}}>{item.shipmentDate}</li>
                            <li style={{'width':'8%'}}>{item.twentyGP}</li>
                            <li style={{'width':'8%'}}>{item.fortyGP}</li>
                            <li style={{'width':'8%'}}>{item.fortyHC}</li>
                            <li style={{'width':'95px'}}>{item.effectiveTime}</li>
                        </ul>
                        )
                        })
                        }
                    </div>
                </div>


            </div>


        </div>

：CSS部分之前用了table，再不用了，太难调，很多样式用不了，要设置为table-layout:fixed ,才可以考虑tr超长显示的问题，然后又有其他的，以后坚决不用了

#bookingIndex .tableHeader{
    border-bottom: 1px solid #DEE4EA;
    padding-bottom: 20px;
}

#bookingIndex .tableHeader li{
    display: inline-block;
    color: #333333;
    font-weight: bold;
    text-align: center;

}

#bookingIndex .tableBody li{
    display: inline-block;
    text-align: center;
    color: inherit;
    line-height: 38px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

#bookingIndex #carousel{
    position:relative;
}

#bookingIndex .fixedPart{
    overflow: hidden;
}

#bookingIndex #carousel ul{
    color: #666666;

}

#bookingIndex #carousel ul:hover{
    color: #EB4B51;
}

js部分

this.loop('#carousel');

$(".prioLinetable").hover(function () {
                clearInterval(_this.IntervalNum);
            },function () {
                _this.loop('#carousel');
            })

loop:function (dom) {
            this.IntervalNum = setInterval(function(){
                $(dom).animate({top:'-38px'},1000,function(){
                    $(this).children('ul:lt(1)').remove().clone(true).appendTo(this);
                    $(this).css({top: 0});
                });
            },3000);
        },

简单说，就是每隔3s，包含数据的div向上移动38px（一行的行高），外层的div设置overflow：hidden属性，同时把最上面的数据移动到尾部