10行js代碼搞定滾動公告

Imfan 發(fā)布于2019-08-21 17:55 / 2492人閱讀

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

需求

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

解決方案 1、 HTML

先建一個div層作為公告顯示區(qū)，里面包裹一個公告列表(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

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

 div,ul,li{margin: 0;padding: 0}/*先初始化一下默認樣式*/
.notice {
    width: 300px;/*單行顯示，超出隱藏*/
    height: 35px;/*固定公告欄顯示區(qū)域的高度*/
    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

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

animate 回調函數(shù) animate 函數(shù)執(zhí)行完之后，要執(zhí)行的函數(shù)。

appendTo() 方法

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

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

4、封裝函數(shù)的調用

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

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

weex滾動公告 兩種實現(xiàn)方式
weex滾動公告
weex滾動公告

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

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

轉載請注明本文地址：http://systransis.cn/yun/90202.html

10行js代碼搞定滾動公告

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

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

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

TesterHome 2019-08-29 13:57 評論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