JS特效--新闻公告

JS特效—新闻公告

先看一下预览效果

https://img-blog.csdn.net/20161022211611154

html代码

<div class="notice">
    <div id="upRoll" class="upRoll">
        <div id="holder1"><!--用于承载已滚动不可见区域-->
            <ul class="ulist">
                <li>
                    <a href="#">
                        <span class="text">【平台公告】系统升级“快捷充值”功能的公告</span>
                        <span class="time">2016-08-22</span>
                    </a>    
                </li>
                <li>
                    <a href="#">
                        <span class="text">CEO出席全球互联网峰会</span>
                        <span class="time">2016-08-23</span>
                    </a>    
                </li>
                <li>
                    <a href="#">
                        <span class="text">【平台公告】关于网络优化的公告</span>
                        <span class="time">2016-08-24</span>
                    </a>    
                </li>
            </ul>
        </div>
    </div>
    <div class="more">
            <a href="#">
                <span>更多公告</span>
            </a>
    </div>
</div>

css代码

@charset "UTF-8";
/*common*/
body {font:15px Arial,"Microsoft YaHei","SimHei";color: #4c5154;}
html,body,div,ul,li{margin:0;padding:0;font-family:Microsoft YaHei, Arial;}
ul li { list-style-type: none; }
ol,ul{list-style:none;}
a{ text-decoration:none; color:#747474 }

.notice {
    width: 998px;
    height: 42px;
    margin: 100px auto;
    border-bottom: 1px solid #BFBFBF;
    border-top: 1px solid #BFBFBF;
}
.upRoll {
    float: left;
    width: 890px;
    height: 42px;
    overflow: hidden;
}
.more {
    float: left;
    width: 98px;
}
.more a {
    height: 42px;
    line-height: 42px;
    border: 1px solid #BFBFBF;
    border-radius: 14px;
    padding: 0 15px;
    color: #737272;
}
.more a:hover,.more a:active {
    color: #2fa8e1;
    border: 1px solid #2fa8e1;
}
.ulist li a{
    display: block;
    padding: 0 30px 0 20px;
    height: 42px;
    line-height: 42px;
}
.ulist li a span{
    display: inline-block;
    float: left;
    height: 42px;
    line-height: 42px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    color: #666;
}
.ulist li a span.text {
    position: relative;
    width: 750px;
}
.ulist li a span.time {
    width: 90px;
}

js代码

<script type="text/javascript">
    function marquee(height,speed,delay){
        var scrollT;
        var pause = false;
        var ScrollBox = document.getElementById("upRoll");
        //此时holder1就有作用了，占据空间
        if(document.getElementById("holder1").offsetHeight <= height) return;
        var _tmp = ScrollBox.innerHTML.replace('holder1', 'holder');
        ScrollBox.innerHTML += _tmp;
        //鼠标经过时，停止滚动
        ScrollBox.onmouseover = function(){pause = true};
        //鼠标离开，继续滚动
        ScrollBox.onmouseout = function(){pause = false};
        ScrollBox.scrollTop = 0;
        function start(){
            scrollT = setInterval(scrolling,speed);
            if(!pause) ScrollBox.scrollTop += 2;
        }
        function scrolling(){
            if(ScrollBox.scrollTop % height != 0){
                ScrollBox.scrollTop += 2;
                if(ScrollBox.scrollTop >= ScrollBox.scrollHeight/2) ScrollBox.scrollTop = 0;
            }
            else{
                clearInterval(scrollT);
                setTimeout(start,delay);
            }
        }
        setTimeout(start,delay);
    }
    marquee(42,30,3000);
</script>