js 实现公告实时更新变动

Posted 2020-11-27 xiaokemo

<div class="notice_active">
    <ul>
        <li><a href="">瑞灿科技直招网络人才 &nbsp;&nbsp; [2019-01-24]</a></li>
        <li><a href="">瑞灿科技正在复工中欢迎广大人士应聘 &nbsp;&nbsp;[2020-02-24]</a></li>
        <li><a href="">近日平顶山市又有一名患者被确诊 &nbsp;&nbsp; [2020-04-02]</a></li>
    </ul>
</div>

.notice_active,ul li{margin: 0;padding: 0}
.notice_active{
    width:380px;
    height: 35px;
    padding: 0 30px;
    background-color: #b3effe;
    overflow: hidden;
}
.notice_active ul li{
    list-style: none;
    line-height: 35px;
    /*以下是为了单行显示 ，超出隐藏*/
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

//公告实时更新
/**
 *
 * @param obj:动画的节点 本例中是ul
 * @param top:动画的高度 本例中是-35px；注意向上滚动是负数
 * @param time ：是滚动的速度 本例中设置3000毫秒
 * function: 回调函数 每次动画完成，marginTop归零 并把此时第一条信息添加到列表后边
 */
function noticeUp(obj,top,time){
    $(obj).animate({
        marginTop:top
    },time,function(){
        $(this).css({marginTop:"0"}).find(":first").appendTo(this)
    })
}
var MyMar=setInterval("noticeUp(‘.notice_active ul‘,‘-15px‘,1000)",3000);
document.getElementsByClassName(".notice_active").onmouseover=function(){
    clearInterval(MyMar);
};
document.getElementsByClassName(".notice_active").onmouseout=function(){
    MyMar=setInterval("noticeUp(‘.notice_active ul‘,‘-15px‘,1000)",3000)
};