JS完成信息转动结果

最最先以为这个结果并不难完成,应用scrollTop和计时器就能够了,然则写完代码后却一直不能完成内容的转动结果,重复搜检JS代码,都没题目。歇息了一会儿,重新最先理清思绪,从HTML代码最先,一步一步搜检,蓦地发明,是CSS款式编写有毛病,代码以下:

<div class="notice">
        <div class="notice_title">关照通告</div>
        <div class="notice_list" id="notice_list_content">
            <ul>
                <li>    
                    <a href="#">西南交通大学面向海内外公然雇用部份治理岗亭的通告(2016年第4号)</a>
                    <span class="date">2016-09-27</span>
                </li>
                <li><a href="#">关于沱江河住手放水及犀浦校区人工湖水位相干状况的转达</a><span class="date">2016-09-27</span></li>
                <li><a href="#">关于构造2016年国庆“老年健身走“运动的关照</a><span class="date">2016-09-27</span></li>
                <li><a href="#">关于举办“交通范畴生长现状及干部生长”公然课的关照</a><span class="date">2016-09-27</span></li>
            </ul>

        </div><!-- notice_title完毕 -->
    </div><!-- notice完毕 -->

应当设置id=”notice_list_content”的div宽度和高度,而不是class=”notice”的div宽度和高度,调解以后,信息转动结果胜利完成。
完全代码以下:

<!--CSS代码-->
<style type="text/css">
    a {
        text-decoration: none;
    }
    .notice {
        width: 840px;
        margin: 0 auto;
        margin-top: 10px;
        height: 45px;
    }
    .notice_title {
        color: #fff;
        font-family: "微软雅黑";
        font-size: 16px;
        margin-top: 10px;
        padding: 5px 8px 5px 20px;
        text-align: center;
        background-color:#025483; 
        width: 120px;
        float: left;
    }
    .notice_list {
        width: 680px;
        float: right;
        height: 33px;
        overflow: hidden;    
    }
    .notice_list li{
        list-style-type: none;
        height: 33px;
    }
    .notice_list a:link,.notice_list a:visited{
        color: #333;
        font-size: 16px; 
    }
    .notice_list a:hover,.notice_list a:active{
        color: #025483;
        font-weight: bold;
    }
    .date {
        color: #888;
        font-size: 14px;
        float: right;
    }
</style>
<!--HTML代码-->
<div class="notice">
        <div class="notice_title">关照通告</div>
        <div class="notice_list" id="notice_list_content">
            <ul>
                <li>    
                    <a href="#">西南交通大学面向海内外公然雇用部份治理岗亭的通告(2016年第4号)</a>
                    <span class="date">2016-09-27</span>
                </li>
                <li><a href="#">关于沱江河住手放水及犀浦校区人工湖水位相干状况的转达</a><span class="date">2016-09-27</span></li>
                <li><a href="#">关于构造2016年国庆“老年健身走“运动的关照</a><span class="date">2016-09-27</span></li>
                <li><a href="#">关于举办“交通范畴生长现状及干部生长”公然课的关照</a><span class="date">2016-09-27</span></li>
            </ul>
            
        </div><!-- notice_title完毕 -->
    </div>
<!--JS代码-->
<script type="text/javascript">
    var area = document.getElementById('notice_list_content');
    area.innerHTML += area.innerHTML;
    area.scrollTop = 0;
    var timer;
    function startMove(){
        timer = setInterval(scrollUp,50);
        area.scrollTop++;        
    }
    function scrollUp()
    {
        if(area.scrollTop%33 === 0)
        {
            clearInterval(timer);
            setTimeout(startMove,1000);
        }
        else
        {
            area.scrollTop++;
            if(area.scrollTop >= area.scrollHeight/2)
            {
                area.scrollTop = 0;
            }
        }
    }
    setTimeout(startMove,1000);
    </script>
    原文作者:kvera
    原文地址: https://segmentfault.com/a/1190000007025516
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞