jQuery 无限滚动展示

jas0n 发布于2019-08-19 17:56 / 3220人阅读

摘要：最近做一个循环滚动展示抽奖结果的功能，示例如下代码抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆代码代码

最近做一个循环滚动展示抽奖结果的功能，示例如下

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79004.html

jQuery 无限滚动展示

摘要：最近做一个循环滚动展示抽奖结果的功能，示例如下代码抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆抽中了颗云豆代码代码最近做一个循环滚动展示抽奖结果的功能，示例如下showImg(https://segmentfault.com/img/bVtInA);html代码 ...

fou7 2019-08-30 12:52 评论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