一行 来回滚动制作

Posted 2021-03-18 lxc127136

 

 

 

一、 html部分:

<div class="f75 cl">

           <ul>

             <li class="fl">工行北京分行：贵金属市场交易策略（20191225</li>

              <li class="fl">工行北京分行：贵金属市场交易策略（20191224）</li>

              <li class="fl">关于调整如意金积存业务最低投资额的通告</li>

               <li class="fl">工行北京分行：贵金属市场交易策略（20191220）</li>

               <li class="fl">波音宣布将暂停生产737MAX系列飞机</li>

                <li class="fl">纽约联储12月制造业指数上升至3.5</li>

                <li class="fl">纽约金价上涨 美元指数下跌</li>

             </ul>

  </div>

二、css部分

.f75{

    width: 400px;

    height: 30px;

    overflow: hidden;

}

.f75 ul li{

    width: 400px;

    height: 30px;

    line-height: 30px;

    margin-left: 15px;

    font-size: 15px;

    text-align: left;

    text-overflow: ellipsis;

    white-space: nowrap;

    overflow: hidden;  //下面这三个一行内多余部分用...表示;

}

.f75 ul li:hover{

    color: #c7000b;

}

三、js部分

var time = setInterval(function () {

    t();

}, 5000)

function t() {

    var he = $(".f75>ul>li").height();  //找到li高

    $(".f75>ul>li").eq(0).appendTo($(".f75>ul"));  //复制第一个到最后一个

    $(".f75>ul").animate({

        "marginTop": "-" + he

    }, 500, function () {

        $(".f75>ul").css({

            "marginTop": 0

        })

    })

}

 

欢迎各位大神 指点和评论;