国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

10行js代碼搞定滾動(dòng)公告

Imfan / 2485人閱讀

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

需求

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

解決方案 1、 HTML

先建一個(gè)div層作為公告顯示區(qū)，里面包裹一個(gè)公告列表(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）的高度也必須是這個(gè)高度（我這里偷懶就用了行高），后面js中還要用到這個(gè)值。

 div,ul,li{margin: 0;padding: 0}/*先初始化一下默認(rèn)樣式*/
.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值來實(shí)現(xiàn)滾動(dòng)效果;
知識(shí)點(diǎn)：

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

appendTo() 方法

在被選元素的結(jié)尾（仍然在內(nèi)部）插入指定內(nèi)容。
注意：指定內(nèi)容是當(dāng)前頁面中的某些元素，那么這些元素將從原位置上消失。簡而言之，這相當(dāng)于一個(gè)移動(dòng)操作，而不是復(fù)制操作。
/*
* 參數(shù)說明
* obj : 動(dòng)畫的節(jié)點(diǎn)，本例中是ul
* top : 動(dòng)畫的高度，本例中是-35px;注意向上滾動(dòng)是負(fù)數(shù)
* time : 動(dòng)畫的速度，即完成動(dòng)畫所用時(shí)間，本例中是500毫秒，即marginTop從0到-35px耗時(shí)500毫秒
* function : 回調(diào)函數(shù)，每次動(dòng)畫完成，marginTop歸零，并把此時(shí)第一條信息添加到列表最后;
* 
*/ 
function noticeUp(obj,top,time) {
    $(obj).animate({
        marginTop: top
    }, time, function () {
        $(this).css({marginTop:"0"}).find(":first").appendTo(this);
    })
}
4、 封裝函數(shù)的調(diào)用

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

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

weex滾動(dòng)公告 兩種實(shí)現(xiàn)方式
weex滾動(dòng)公告
weex滾動(dòng)公告

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/90202.html

相關(guān)文章

  • 10行js代碼搞定滾動(dòng)公告

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

    curried 評(píng)論0 收藏0

  • 10行js代碼搞定滾動(dòng)公告

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

    TesterHome 評(píng)論0 收藏0

  • 單行文字向上滾動(dòng)

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

    lx1036 評(píng)論0 收藏0

  • 單行文字向上滾動(dòng)

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

    AlienZHOU 評(píng)論0 收藏0

  • 單行文字向上滾動(dòng)

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

    yuanzhanghu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<