10行js代碼搞定滾動公告

TesterHome 發布于2019-08-29 13:57 / 3152人閱讀

摘要：先初始化一下默認樣式單行顯示，超出隱藏固定公告欄顯示區域的高度以下為了單行顯示，超出隱藏封裝函數使用方法改變列表的值來實現滾動效果知識點回調函數函數執行完之后，要執行的函數。

需求

最近項目中需要實現公告欄滾動顯示效果如下

解決方案 1、 HTML

先建一個div層作為公告顯示區，里面包裹一個公告列表(ul);


    
        第1條公告第1條公告第1條公告第1條公告第1條公告第1條公告
        第2條公告第2條公告第2條公告第2條公告第2條公告第2條公告
        第3條公告第3條公告第3條公告第3條公告第3條公告第3條公告
        第4條公告第4條公告第4條公告第4條公告第4條公告第4條公告

2、 CSS

固定公告欄顯示區域的高度（35px）,每條公告信息（li）的高度也必須是這個高度（我這里偷懶就用了行高），后面js中還要用到這個值。

 div,ul,li{margin: 0;padding: 0}/*先初始化一下默認樣式*/
.notice {
    width: 300px;/*單行顯示，超出隱藏*/
    height: 35px;/*固定公告欄顯示區域的高度*/
    padding: 0 30px;
    background-color: #b3effe;
    overflow: hidden;
}
.notice ul li {
    list-style: none;
    line-height: 35px;
    /*以下為了單行顯示，超出隱藏*/
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

3、 JavaScript

封裝函數 noticeUp.js
使用 jquery animate方法改變列表ul的marginTop值來實現滾動效果;
知識點：

animate 回調函數 animate 函數執行完之后，要執行的函數。

appendTo() 方法

在被選元素的結尾（仍然在內部）插入指定內容。
注意：指定內容是當前頁面中的某些元素，那么這些元素將從原位置上消失。簡而言之，這相當于一個移動操作，而不是復制操作。

/*
* 參數說明
* obj : 動畫的節點，本例中是ul
* top : 動畫的高度，本例中是-35px;注意向上滾動是負數
* time : 動畫的速度，即完成動畫所用時間，本例中是500毫秒，即marginTop從0到-35px耗時500毫秒
* function : 回調函數，每次動畫完成，marginTop歸零，并把此時第一條信息添加到列表最后;
* 
*/ 
function noticeUp(obj,top,time) {
    $(obj).animate({
        marginTop: top
    }, time, function () {
        $(this).css({marginTop:"0"}).find(":first").appendTo(this);
    })
}

4、封裝函數的調用

首先引入jQuery庫和自己的封裝插件
使用定時器setInterval來控制公告信息顯示的時間間隔，本例中是2000毫秒

更多滾動公告方式：
我的另一篇 VUE 滾動公告
還有小伙伴的vue實現消息的無縫滾動效果（完善版）

weex滾動公告 兩種實現方式
weex滾動公告
weex滾動公告

云服務器 GPU云服務器 asp公告代碼 asp設置刪除10行 js 公告只顯示一次 php楊輝三角10行

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112815.html

10行js代碼搞定滾動公告

摘要：先初始化一下默認樣式單行顯示，超出隱藏固定公告欄顯示區域的高度以下為了單行顯示，超出隱藏封裝函數使用方法改變列表的值來實現滾動效果知識點回調函數函數執行完之后，要執行的函數。需求最近項目中需要實現公告欄滾動顯示效果如下 showImg(https://segmentfault.com/img/bVZJSE?w=400&h=53); 解決方案 1、 HTML 先建一個div層作為公告...

curried 2019-08-02 15:59 評論0 收藏0
10行js代碼搞定滾動公告

摘要：先初始化一下默認樣式單行顯示，超出隱藏固定公告欄顯示區域的高度以下為了單行顯示，超出隱藏封裝函數使用方法改變列表的值來實現滾動效果知識點回調函數函數執行完之后，要執行的函數。需求最近項目中需要實現公告欄滾動顯示效果如下 showImg(https://segmentfault.com/img/bVZJSE?w=400&h=53); 解決方案 1、 HTML 先建一個div層作為公告...

Imfan 2019-08-21 17:55 評論0 收藏0
單行文字向上滾動

摘要：最近在做一個活動頁，需要一個單行文字向上滾動的效果來展示獲獎公告。效果如下廢話不多說，下面直接貼上代碼。最近在做一個活動頁，需要一個單行文字向上滾動的效果來展示獲獎公告。效果如下： showImg(https://segmentfault.com/img/bVbeP8b?w=314&h=60); 廢話不多說，下面直接貼上代碼。 html代碼如下： ...

lx1036 2019-08-29 16:15 評論0 收藏0
單行文字向上滾動

摘要：最近在做一個活動頁，需要一個單行文字向上滾動的效果來展示獲獎公告。效果如下廢話不多說，下面直接貼上代碼。最近在做一個活動頁，需要一個單行文字向上滾動的效果來展示獲獎公告。效果如下： showImg(https://segmentfault.com/img/bVbeP8b?w=314&h=60); 廢話不多說，下面直接貼上代碼。 html代碼如下： ...

AlienZHOU 2019-08-23 10:42 評論0 收藏0
單行文字向上滾動

摘要：最近在做一個活動頁，需要一個單行文字向上滾動的效果來展示獲獎公告。效果如下廢話不多說，下面直接貼上代碼。最近在做一個活動頁，需要一個單行文字向上滾動的效果來展示獲獎公告。效果如下： showImg(https://segmentfault.com/img/bVbeP8b?w=314&h=60); 廢話不多說，下面直接貼上代碼。 html代碼如下： ...

yuanzhanghu 2019-08-02 11:07 評論0 收藏0