jquery特效：无缝向上循环滚动列表

hot_pot_Leo 发布于2019-08-21 10:19 / 2078人阅读

摘要：效果呈现整个列表间隔设定的时间向上移动一个的高度结构设置时，注意高度是显示多少个如的高度是，显示个，高度则是实现思路获得下第一个元素的高度，对它的或进行一个从有到无的动画变化，代码如下或者改成动画结束后，把它插到最后，形成无缝

效果呈现

整个列表间隔设定的时间向上移动一个item的高度

html结构：

   
        title1
        title2
        title3
   
   
        
            item1item1item1
            item2item2item2
            item2item2item2

实现思路：
获得js-slide-list下第一个li元素的高度，对它的height或marginTop进行一个从有到无的动画变化，代码如下：

var doscroll = function(){
    var $parent = $(".js-slide-list");
    var $first = $parent.find("li:first");
    var height = $first.height();
    $first.animate({
        height: 0   //或者改成： marginTop: -height + "px"
        }, 500, function() {// 动画结束后，把它插到最后，形成无缝
        $first.css("height", height).appendTo($parent);
       // $first.css("marginTop", 0).appendTo($parent);
    });
};
setInterval(function(){doscroll()}, 2000);

Demo1
Demo2

云服务器 GPU云服务器无缝滚动水平无缝滚动文字无缝滚动无缝循环

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

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

JavaScript 进阶知识 - 特效篇(一)

摘要：之前是一个全局变量，如果不独立，页面只有一个定时器在运作。这时的判断条件应该是目标距离与盒子目前距离之间差的绝对值大于等于一步距离绝对值的时候，让他们执行否则的话清除清除定时器，并将最后的距离直接设置为的距离。 showImg(https://segmentfault.com/img/remote/1460000012623412?w=1920&h=1080); JS特效前言经过前...

curlyCheng 2019-08-21 18:27 评论0 收藏0
CSS3热身实战--过渡与动画（实现炫酷下拉，手风琴，无缝滚动）

摘要：规定动画的时长。注意子菜单要用隐藏，在显示的时候再设置。如果不加，实际上子菜单，以及子菜单下面的一直在页面上，如果鼠标移上去子菜单，以及子菜单下面的。 1.前言在自己的专栏上写了十几篇文章了，都是与js有关的。暂时还没有写过关于css3的文章。css3，给我的感觉就是，不难，但是很难玩转自如。今天，就用css3来实现三个特效，希望这三个特殊能让大家受到启发，利用css3做出更好，更炫...

zqhxuyuan 2019-08-29 13:03 评论0 收藏0
10行js代码搞定滚动公告

摘要：先初始化一下默认样式单行显示，超出隐藏固定公告栏显示区域的高度以下为了单行显示，超出隐藏封装函数使用方法改变列表的值来实现滚动效果知识点回调函数函数执行完之后，要执行的函数。需求最近项目中需要实现公告栏滚动显示效果如下 showImg(https://segmentfault.com/img/bVZJSE?w=400&h=53); 解决方案 1、 HTML 先建一个div层作为公告...

curried 2019-08-02 15:59 评论0 收藏0
10行js代码搞定滚动公告

摘要：先初始化一下默认样式单行显示，超出隐藏固定公告栏显示区域的高度以下为了单行显示，超出隐藏封装函数使用方法改变列表的值来实现滚动效果知识点回调函数函数执行完之后，要执行的函数。需求最近项目中需要实现公告栏滚动显示效果如下 showImg(https://segmentfault.com/img/bVZJSE?w=400&h=53); 解决方案 1、 HTML 先建一个div层作为公告...

TesterHome 2019-08-29 13:57 评论0 收藏0
10行js代码搞定滚动公告

摘要：先初始化一下默认样式单行显示，超出隐藏固定公告栏显示区域的高度以下为了单行显示，超出隐藏封装函数使用方法改变列表的值来实现滚动效果知识点回调函数函数执行完之后，要执行的函数。需求最近项目中需要实现公告栏滚动显示效果如下 showImg(https://segmentfault.com/img/bVZJSE?w=400&h=53); 解决方案 1、 HTML 先建一个div层作为公告...

Imfan 2019-08-21 17:55 评论0 收藏0