jquery特效：無(wú)縫向上循環(huán)滾動(dòng)列表

hot_pot_Leo 發(fā)布于2019-08-21 10:19 / 2145人閱讀

摘要：效果呈現(xiàn)整個(gè)列表間隔設(shè)定的時(shí)間向上移動(dòng)一個(gè)的高度結(jié)構(gòu)設(shè)置時(shí)，注意高度是顯示多少個(gè)如的高度是，顯示個(gè)，高度則是實(shí)現(xiàn)思路獲得下第一個(gè)元素的高度，對(duì)它的或進(jìn)行一個(gè)從有到無(wú)的動(dòng)畫變化，代碼如下或者改成動(dòng)畫結(jié)束后，把它插到最后，形成無(wú)縫

效果呈現(xiàn)

整個(gè)列表間隔設(shè)定的時(shí)間向上移動(dòng)一個(gè)item的高度

html結(jié)構(gòu)：

   
        title1
        title2
        title3
   
   
        
            item1item1item1
            item2item2item2
            item2item2item2

實(shí)現(xiàn)思路：
獲得js-slide-list下第一個(gè)li元素的高度，對(duì)它的height或marginTop進(jìn)行一個(gè)從有到無(wú)的動(dòng)畫變化，代碼如下：

var doscroll = function(){
    var $parent = $(".js-slide-list");
    var $first = $parent.find("li:first");
    var height = $first.height();
    $first.animate({
        height: 0   //或者改成： marginTop: -height + "px"
        }, 500, function() {// 動(dòng)畫結(jié)束后，把它插到最后，形成無(wú)縫
        $first.css("height", height).appendTo($parent);
       // $first.css("marginTop", 0).appendTo($parent);
    });
};
setInterval(function(){doscroll()}, 2000);

Demo1
Demo2

GPU云服務(wù)器云服務(wù)器無(wú)縫滾動(dòng) 水平無(wú)縫滾動(dòng) 文字無(wú)縫滾動(dòng) 無(wú)縫循環(huán)

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

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

相關(guān)文章

JavaScript 進(jìn)階知識(shí) - 特效篇(一)

摘要：之前是一個(gè)全局變量，如果不獨(dú)立，頁(yè)面只有一個(gè)定時(shí)器在運(yùn)作。這時(shí)的判斷條件應(yīng)該是目標(biāo)距離與盒子目前距離之間差的絕對(duì)值大于等于一步距離絕對(duì)值的時(shí)候，讓他們執(zhí)行否則的話清除清除定時(shí)器，并將最后的距離直接設(shè)置為的距離。 showImg(https://segmentfault.com/img/remote/1460000012623412?w=1920&h=1080); JS特效前言經(jīng)過(guò)前...

curlyCheng 2019-08-21 18:27 評(píng)論0 收藏0
CSS3熱身實(shí)戰(zhàn)--過(guò)渡與動(dòng)畫（實(shí)現(xiàn)炫酷下拉，手風(fēng)琴，無(wú)縫滾動(dòng)）

摘要：規(guī)定動(dòng)畫的時(shí)長(zhǎng)。注意子菜單要用隱藏，在顯示的時(shí)候再設(shè)置。如果不加，實(shí)際上子菜單，以及子菜單下面的一直在頁(yè)面上，如果鼠標(biāo)移上去子菜單，以及子菜單下面的。 1.前言在自己的專欄上寫了十幾篇文章了，都是與js有關(guān)的。暫時(shí)還沒(méi)有寫過(guò)關(guān)于css3的文章。css3，給我的感覺(jué)就是，不難，但是很難玩轉(zhuǎn)自如。今天，就用css3來(lái)實(shí)現(xiàn)三個(gè)特效，希望這三個(gè)特殊能讓大家受到啟發(fā)，利用css3做出更好，更炫...

zqhxuyuan 2019-08-29 13:03 評(píng)論0 收藏0
10行js代碼搞定滾動(dòng)公告

摘要：先初始化一下默認(rèn)樣式單行顯示，超出隱藏固定公告欄顯示區(qū)域的高度以下為了單行顯示，超出隱藏封裝函數(shù)使用方法改變列表的值來(lái)實(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 2019-08-02 15:59 評(píng)論0 收藏0
10行js代碼搞定滾動(dòng)公告

摘要：先初始化一下默認(rèn)樣式單行顯示，超出隱藏固定公告欄顯示區(qū)域的高度以下為了單行顯示，超出隱藏封裝函數(shù)使用方法改變列表的值來(lái)實(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 2019-08-29 13:57 評(píng)論0 收藏0
10行js代碼搞定滾動(dòng)公告

摘要：先初始化一下默認(rèn)樣式單行顯示，超出隱藏固定公告欄顯示區(qū)域的高度以下為了單行顯示，超出隱藏封裝函數(shù)使用方法改變列表的值來(lái)實(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層作為公告...

Imfan 2019-08-21 17:55 評(píng)論0 收藏0