成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

jQuery 無限滾動展示

JasinYip / 2178人閱讀

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

最近做一個循環(huán)滾動展示抽獎結(jié)果的功能，示例如下

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;}

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

    轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/49803.html

    相關(guān)文章

    • jQuery 無限滾動展示

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

      jas0n 評論0 收藏0

    • jQuery 無限滾動展示

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

      fou7 評論0 收藏0

    • 懶加載、瀑布流和LightBox實現(xiàn)圖片搜索效果

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

      rainyang 評論0 收藏0

    • JS或Jquery

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

      CatalpaFlat 評論0 收藏0

    • 超酷的 mip-infinitescroll 無限滾動（無限下拉）

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

      CloudwiseAPM 評論0 收藏0

    發(fā)表評論

    0條評論

    閱讀需要支付1元查看
    <