js实现滚动功能---公告栏

最近找工作找的头昏脑胀,突然发现自己之前是多么的幸福。。。。
闲下来,充实我的博客

滚动公告栏

滚动公告栏,之前在毕设中就实现过一次,现在翻出来重新写一次。
原理:div公告栏(#part2)设置具体宽高,并设置溢出隐藏,这个地方就是我们公告展示的地方。在公告栏中有两个div,一个用来放置我们的公告内容,另一个用来填补当公告一滚动完时,中间空出来的一小块空间。
js实现滚动功能---公告栏_第1张图片
注:红色为公告栏,棕色为公告一。
公告循环滚动是当公告一完全走完公告栏时,再将公告栏的scrollTop重新置0,从而使公告一重新再次滚动。而当公告一最后一条公告开始从公告栏向上滚动时,由于此时并没有重置srcollTop,将会有一段为空白(就是图中绿色部分),所以需要公告二暂时填充一会。

代码如下:


<html>
<head>
    <meta charset="utf-8">
    <title>公告滚动title>
    <style type="text/css">
        .case {
            position: absolute;
            width: 800px;
            height: 30px;
            overflow: hidden;
            left: calc(50% - 400px);
            top: 150px;
        }
        .case .part1 {
            float: left;
            width: 5%;
            height: 30px;
        }
        .case .part1 img {
            width: 20px;
            height: 20px;
            float: right;
            margin-top: 5px;
        }
        .case .part2 {
            float: left;
            width: 93%;
            height: 30px;
            text-indent: 1em;
            overflow: hidden;
        }
        #part2 ul {
            width: 100%;
            height: auto;
            list-style: none;
            padding: 0;
            margin: 0;
        }
        #part2 ul li {
            width: 100%;
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            color: #575757;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    style>
head>
<body>
    <div class="case">
        <div class="part1">
            <img src="../img/notice.png">//一个喇叭的图片
        div>
        <div class="part2" id="part2">
            <div id="scroll1">
                <ul>
                    <li>不要被别人表现出来的毫不费力所迷惑,你要知道,那些信手拈来的东西,一定有拼尽全力作为支撑。li>
                    <li>这个世界上,天才好像真的没有那么多。li>
                    <li>而我希望,自己也可以在别人看不见的地方不动声色的努力,在关键时刻出其不意的傲娇绽放。li>
                    <li>这个年纪我不在将就。li>
                ul>
            div>
            <div id="scroll2">div>
        div>
    div>

    <script type="text/javascript">

        var PartArea = document.getElementById('part2');
        var Scroll1 = document.getElementById('scroll1');
        var Scroll2 = document.getElementById('scroll2');

        Scroll2.innerHTML = Scroll1.innerHTML;

        function roll() {
            if(Scroll2.offsetHeight - PartArea.scrollTop <= 0) {
                PartArea.scrollTop -= Scroll1.offsetHeight;
            } else {
                PartArea.scrollTop++;
            }
        }

        var StopRoll = setInterval(roll, 60);

        PartArea.onmouseover = function () {
            clearInterval(StopRoll);
        }
        PartArea.onmouseout = function () {
            StopRoll = setInterval(roll, 60);
        }

    script>
body>
html>

**可运行代码

你可能感兴趣的:(前端)