jQuery 無限滾動展示

fou7 發布于2019-08-30 12:52 / 2887人閱讀

摘要：最近做一個循環滾動展示抽獎結果的功能，示例如下代碼抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆代碼代碼

最近做一個循環滾動展示抽獎結果的功能，示例如下

html代碼


    
                                        
            1111抽中了2222顆云豆
            2222抽中了2222顆云豆
            3333抽中了2222顆云豆
            4444抽中了2222顆云豆
            5555抽中了2222顆云豆
            6666抽中了2222顆云豆
            7777抽中了2222顆云豆
            8888抽中了2222顆云豆
            9999抽中了2222顆云豆
            6666抽中了2222顆云豆
            7777抽中了2222顆云豆
            8888抽中了2222顆云豆
            9999抽中了2222顆云豆

js代碼

$(function(){
     var list1 = $("#list1"),
        list2 = $("#list2"),
        list_wrap = $(".list-wrap"),
        speed = 40;
    list2.html(list1.html());
    function scroll(){
        if(list2.offset().top-list_wrap.scrollTop()<=0){
            console.log(list_wrap.scrollTop() - list1.get(0).offsetHeight);
            list_wrap.scrollTop(list_wrap.scrollTop() - list1.get(0).offsetHeight);
        }else{
            list_wrap.scrollTop(list_wrap.scrollTop() + 1);
        }
    }
    var list_scroll=setInterval(scroll,speed);
    list_wrap.hover(function(){
        clearInterval(list_scroll)
    },function(){
        clearInterval(list_scroll),
        list_scroll = setInterval(scroll,speed)
    });
});

css代碼

.list{width:280px;height:300px;}
.list .list-wrap {overflow:hidden;width:280px;height:300px;}
.list .list-wrap ul{margin:0;padding: 0;}
.list .list-wrap ul li{margin:0;padding:0;line-height:30px;list-style-type: none;}
.list .list-wrap ul li .name{display:inline-block;width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;}
.list .list-wrap ul li .bean{color:#ff5152;}

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

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

jQuery 無限滾動展示

摘要：最近做一個循環滾動展示抽獎結果的功能，示例如下代碼抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆代碼代碼最近做一個循環滾動展示抽獎結果的功能，示例如下showImg(https://segmentfault.com/img/bVtInA);html代碼 ...

jas0n 2019-08-19 17:56 評論0 收藏0
jQuery 無限滾動展示

摘要：最近做一個循環滾動展示抽獎結果的功能，示例如下代碼抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆代碼代碼最近做一個循環滾動展示抽獎結果的功能，示例如下showImg(https://segmentfault.com/img/bVtInA);html代碼 ...

JasinYip 2019-08-01 15:10 評論0 收藏0
懶加載、瀑布流和LightBox實現圖片搜索效果

摘要：無非就是獲取用戶輸入的獲取圖片信息組裝填充頁面數據瀑布流布局處理在頁面滾動時判斷最后一張圖片是否可見，如果是則重復以上內容查看源碼開始做一個小項目，算是對js和jQuery的一次練習吧。圖片資源來自這個網站（上面有很多高清圖片關鍵還是免費下載的）：https://unsplash.com/ 項目具體效果可以點這里：https://bjw1234.github.io/ima......

rainyang 2019-08-26 11:51 評論0 收藏0
JS或Jquery

摘要：大潮來襲前端開發能做些什么去年谷歌和火狐針對提出了的標準，顧名思義，即的體驗方式，我們可以戴著頭顯享受沉浸式的網頁，新的標準讓我們可以使用語言來開發。 VR 大潮來襲 --- 前端開發能做些什么去年谷歌和火狐針對 WebVR 提出了 WebVR API 的標準，顧名思義，WebVR 即 web + VR 的體驗方式，我們可以戴著頭顯享受沉浸式的網頁，新的 API 標準讓我們可以使用 ...

CatalpaFlat 2019-08-22 11:17 評論0 收藏0
超酷的 mip-infinitescroll 無限滾動（無限下拉）

摘要：寫在前面無限滾動又叫做無限下拉技術被廣泛應用于新聞類，圖片預覽類網站。因此，繼列表組件之后，為提升用戶體驗，開發了無限滾動組件。屬性非必選項與模板對應，用來標識所采用的模板，默認取組件子節點中的模板。寫在前面無限滾動（又叫做無限下拉）技術被廣泛應用于新聞類，圖片預覽類網站。對用戶來講，使用無限滾動的頁面有源源不斷的信息可以預覽，增加用戶在頁面的停留時長。技術上原理也很簡單，在頁面加...

CloudwiseAPM 2019-08-20 15:09 評論0 收藏0