js實現滾動功能---公告欄

阿新 • • 發佈：2019-02-11

最近找工作找的頭昏腦脹，突然發現自己之前是多麼的幸福。。。。
閒下來，充實我的部落格

滾動公告欄

滾動公告欄，之前在畢設中就實現過一次，現在翻出來重新寫一次。
原理：div公告欄（#part2）設定具體寬高，並設定溢位隱藏，這個地方就是我們公告展示的地方。在公告欄中有兩個div，一個用來放置我們的公告內容，另一個用來填補當公告一滾動完時，中間空出來的一小塊空間。

注：紅色為公告欄，棕色為公告一。
公告迴圈滾動是當公告一完全走完公告欄時,再將公告欄的scrollTop重新置0，從而使公告一重新再次滾動。而當公告一最後一條公告開始從公告欄向上滾動時，由於此時並沒有重置srcollTop，將會有一段為空白（就是圖中綠色部分），所以需要公告二暫時填充一會。

程式碼如下：

<!DOCTYPE html>
<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>

**可執行程式碼

js實現滾動功能---公告欄

滾動公告欄

js實現滾動功能---公告欄

js實現replaceAll功能

VUE.JS實現購物車功能

destoon開發筆記-JQ+JS實現倒計時功能

js實現滾動效果

clipboard.js實現複製功能的示例程式碼

js實現語音功能

原生Js實現複製功能的方法總結，execCommand和clipboardData的使用

node——8-node.js 實現 apache 功能

原生JS實現放大鏡功能

JS 實現計算器功能

js實現sleep功能

使用clipboard.js實現複製功能

使用clipboard.js實現複製功能的示例程式碼

js實現分享功能

JS實現滾動監聽以及滑動到頂部【轉】

使用原生JS實現放大鏡功能

arcgis js 實現捲簾功能

JS實現複製功能，相容各大主流瀏覽器複製神器 ZeroClipboard

js實現定位功能

js實現滾動功能---公告欄

滾動公告欄

相關推薦