jquery特效：無縫向上循環(huán)滾動列表

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

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

效果呈現(xiàn)

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

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

   
        title1
        title2
        title3
   
   
        
            item1item1item1
            item2item2item2
            item2item2item2

實現(xiàn)思路：
獲得js-slide-list下第一個li元素的高度，對它的height或marginTop進行一個從有到無的動畫變化，代碼如下：

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() {// 動畫結(jié)束后，把它插到最后，形成無縫
        $first.css("height", height).appendTo($parent);
       // $first.css("marginTop", 0).appendTo($parent);
    });
};
setInterval(function(){doscroll()}, 2000);

Demo1
Demo2

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

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

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

相關(guān)文章

JavaScript 進階知識 - 特效篇(一)

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

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

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

zqhxuyuan 2019-08-29 13:03 評論0 收藏0
10行js代碼搞定滾動公告

摘要：先初始化一下默認樣式單行顯示，超出隱藏固定公告欄顯示區(qū)域的高度以下為了單行顯示，超出隱藏封裝函數(shù)使用方法改變列表的值來實現(xiàn)滾動效果知識點回調(diào)函數(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)滾動效果知識點回調(diào)函數(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
10行js代碼搞定滾動公告

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

Imfan 2019-08-21 17:55 評論0 收藏0