jQuery 無(wú)限滾動(dòng)展示

fou7 發(fā)布于2019-08-30 12:52 / 2897人閱讀

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

最近做一個(gè)循環(huán)滾動(dòng)展示抽獎(jiǎng)結(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

jQuery 無(wú)限滾動(dòng)展示

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

jas0n 2019-08-19 17:56 評(píng)論0 收藏0
jQuery 無(wú)限滾動(dòng)展示

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

JasinYip 2019-08-01 15:10 評(píng)論0 收藏0
懶加載、瀑布流和LightBox實(shí)現(xiàn)圖片搜索效果

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

rainyang 2019-08-26 11:51 評(píng)論0 收藏0
JS或Jquery

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

CatalpaFlat 2019-08-22 11:17 評(píng)論0 收藏0
超酷的 mip-infinitescroll 無(wú)限滾動(dòng)（無(wú)限下拉）

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

CloudwiseAPM 2019-08-20 15:09 評(píng)論0 收藏0