基于jQuery实现列表循环滚动小技巧(超简单)

看到一个很好的思路,记录一下

之前使用jQuery做滚动效果,在这两篇文章里有写:文一、文二,分别使用了scrollLeft()与scrollTop()、scroll()来实现

后来看到一个demo,觉得思路很妙,想着可以用来做列表内容项的滚动,效果大概是这样的:

思路是这样的:
只要能够不停地把第一个item移动到末尾,其余的自会往上填补空缺,填补的过程用动画放慢些,就能有不断滚动的视觉效果了(数组删了第一个元素,再在末尾加上这个元素,等于把第一个元素移动到末尾;元素总量没有改变,但位置全发生了改变)

代码:

// 要填充的数据
 var data = {
     infoItem : [
         "<strong>第1行:</strong>安之安之安之安之安之安之安之安之安之安之安",
         "<strong>第2行:</strong>阳光彩虹小白马阳光彩虹小白马阳光彩虹小白马",
         "<strong>第3行:</strong>天地之悠悠天地之悠悠天地之悠悠天地之悠悠天"
     ]
 }
 // 将数据动态填充到页面种
 var infoList = []
 for (let i = 0; i < data.infoItem.length; i++){
     let infoStr = `<div class="item">${data.infoItem[i]}</div>`
     infoList.push(infoStr);
 }
 $(".info-wrapper").html(infoList.join(""))

 // 设置计时器,每隔2秒执行一次(变换一次)
 var timer = null;
 timer = setInterval(function () {
     // 将第一行item移到最后一行,其他的往上挪填补空缺位
     var infoItemTmp = infoList.shift();
     $(".info-wrapper").append(infoItemTmp );
     $(".item:first").remove();
     infoList.push(infoItemTmp)

 }, 2000)

html和样式部分:

<div class="container">
        <div class="wrapper">
            <div class="info">
                <div class="info-wrapper"></div>
            </div>
        </div>
    </div>
.constainer {
    width: 900px;
    height: 400px;
    border: 2px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper {
    width: 500px;
    height: 300px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-content: center;
}

.info {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
}

.info-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.item {
    border: 2px solid #ccc;
    border-left: 4px solid orange;
    height: 80px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 8px;
    margin-top: 20px;
}

目前效果是这样的:

再加上滑动效果的动画:

.item:first-child {
    animation: move 2s linear;
}
@keyframes move {
    100% {
        margin-top: -80px;
    }
}

不断滑动,到达可以加入新item的位置时,触发新item的加入:

// 设置计时器,每隔2秒执行一次(变换一次)--与animation动画时设置时间一致
var timer = null;
timer = setInterval(function () {
    if ($('.info').scrollTop() + $('.info').height() >= $('.info-wrapper').height()) {
        // 将第一行item移到最后一行,其他的往上挪填补空缺位
        var infoItemTmp = infoList.shift();
        $(".info-wrapper").append(infoItemTmp);
        $(".item:first").remove();
        infoList.push(infoItemTmp)
    }
}, 2000)

就可以得到开头的效果了

到此这篇关于基于jQuery实现列表循环滚动小技巧(超简单)的文章就介绍到这了,更多相关jQuery列表循环滚动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • jQuery控制li上下循环滚动插件用法实例(附demo源码下载)

    本文实例讲述了jQuery控制li上下循环滚动插件用法.分享给大家供大家参考,具体如下: /** * * jQuery scrollQ plugin li上下滚动插件 * @name jquery-scrollQ.js * @author Q * @date 2012-03-23 * line 显示li行数 * scrollNum 每次滚动li行数 * scrollTime 滚动速度 单位毫秒 * */ (function($){ var status = false; $.fn.scrollQ

  • 使用jquery实现的循环连续可停顿滚动实例

    使用jquery实现的循环连续可停顿滚动,并应用于滚动图片,滚动层.记得一定要有jquery库哦~ 一.单行滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

  • 多种JQuery循环滚动文字图片效果代码

    自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上.下.左.右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置.JQ里面有些重复的地方,暂时没想到更好的方法去精简.不过效果还是可以的,如下(效果图上传后都加速了,实际效果比这个要慢很多): html代码如下: <!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <

  • jQuery实现列表自动滚动循环滚动展示新闻

    需要在页面中一个小的区域循环滚动展示新闻(公告.活动.图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动. 效果图: 上干货 html: 复制代码 代码如下: <div id="news"> <ul> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofol

  • jQuery实现列表自动循环滚动鼠标悬停时停止滚动

    需要在页面中一个小的区域循环滚动展示新闻(公告.活动.图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动. 效果图:  上干货 html: 复制代码 代码如下: <div id="news"> <ul> <li><a href="#" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li> <li><a h

  • Jquery实现无缝向上循环滚动列表的特效

    效果呈现 整个列表间隔设定的时间向上移动一个item的高度 html结构: <div class="slide-title"> <span>title1</span> <span>title2</span> <span>title3</span> </div> <div class="slide-container"><!--css设置时,注意高度是显示

  • jQuery循环滚动新闻列表示例代码

    最近由于项目原因,学习了下jquery,实现了一个小小的功能,就是点击公告的上一条下一条来查看滚动条.具体代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta ht

  • 基于jQuery实现列表循环滚动小技巧(超简单)

    看到一个很好的思路,记录一下 之前使用jQuery做滚动效果,在这两篇文章里有写:文一.文二,分别使用了scrollLeft()与scrollTop().scroll()来实现 后来看到一个demo,觉得思路很妙,想着可以用来做列表内容项的滚动,效果大概是这样的: 思路是这样的: 只要能够不停地把第一个item移动到末尾,其余的自会往上填补空缺,填补的过程用动画放慢些,就能有不断滚动的视觉效果了(数组删了第一个元素,再在末尾加上这个元素,等于把第一个元素移动到末尾:元素总量没有改变,但位置全发生

  • 基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)

    从需求上来说,这个功能需要实时调用最新的微博数据,单就前端开发来说,其需求可以拆分如下: 1 内容持续滚动: 2 新微博将下面的微博先推下去,然后淡入进来: 3 鼠标经过内容暂停滚动: 4 容器底部渐变消失在背景色下. 上述4个需求之中,需求1-3为js技术实现,需求4为css技术实现,下面逐个需求来讲. 需求1和需求2:内容持续滚动的需求有些类似前一篇文章<小模块:公告滚动并暂停>中介绍的功能,在那篇文章中,此功能使用css的position定位来控制整个ul列表的移动动画.结合需求2,我们

  • 基于jQuery的上下无缝滚动应用(单行或多行)

    核心jQuery代码: 复制代码 代码如下: $(function(){ var _wrap=$('ul.line');//定义滚动区域 var _interval=2000;//定义滚动间隙时间 var _moving;//需要清除的动画 _wrap.hover(function(){ clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动 },function(){ _moving=setInterval(function(){ var _field=_wrap.f

  • Python中使用filter过滤列表的一个小技巧分享

    有的时候使用dir(Module),可以查看里面的方法,但是模块自带的属性"__"开头的也会显示,如下: >>> import random >>> dir(random) ['BPF', 'LOG4', 'NV_MAGICCONST', 'RECIP_BPF', 'Random', 'SG_MAGICCONST', 'SystemRandom', 'TWOPI', 'WichmannHill', '_Buil tinMethodType', '_M

  • js实现列表循环滚动

    本文实例为大家分享了js实现文字无缝轮播的具体代码,供大家参考,具体内容如下 先介绍几个属性 clientHeight 元素的高度 clientTop 元素顶部边框的宽度 scrollTop 滚动条遮挡的部分的高度(包含border) scrollHeight 整个内容的高度(包含border) offsetTop 距离上一个 position 不为 static(默认) 的元素的顶部内边框的距离 <!DOCTYPE html> <html lang="en">

  • jQuery前端开发35个小技巧

    废话不说 直接代码,有问题可以一起交流 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 Hide when clicked in the search field, the value.(example can be found below in the comment fields) $(docu

  • 简略的前端架构心得&&基于editor为例子的编码小技巧

    比较粗糙简略.感兴趣的同学可以看看.稍微贴下主要内容吧: 这是第一份ppt主要的内容.具体东西我就不多贴了,对这几个方面感兴趣的同学可以下载来看看,既然是基于editor为例子的ppt,这里我也附上一个简单的利用execCommand命令做的简易的demo,editor的原理在demo里都能看出来.这里附上代码: <!doctype html> 复制代码 代码如下: <html> <head> <style type="text/css">

  • 基于jQuery实现Div窗口震动特效代码-代码简单

    这是一款jQuery窗口震动效果代码,在Div边框内点击一下鼠标,它就开始震动了,适用浏览器:IE8.360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗等. 效果图如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=&q

  • 程序员应该知道的vuex冷门小技巧(超好用)

    目录 当访问某个数据项嵌套太深了,优化一下访问的方式 mapState的使用步骤 使用 原理 如果vuex中的数据与本组件内的数据名相同,怎么办呢? 使用全局state 那如果是分模块化呢?如何使用modules中的state? 总结 当访问某个数据项嵌套太深了,优化一下访问的方式 我相信每一个程序员都会使用vuex吧,首先我承认vuex真的超好用,尤其是在项目特别大的时候,代码会看起来非常的简洁,也方便维护,但是项目大了,vuex的公共数据的嵌套也会越来越深,在组件中使用的时候就会像下面这张图

随机推荐