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

效果呈现

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

html结构：

 <div class="slide-title">
  <span>title1</span>
  <span>title2</span>
  <span>title3</span>
 </div>
 <div class="slide-container"><!--css设置时，注意高度是显示多少个item,如：item的高度是30px，显示3个，高度则是 3*30 = 90px -->
  <ul class="slide-list js-slide-list">
   <li class="odd"><span>item1</span><span>item1</span><span>item1</span></li>
   <li class="even"><span>item2</span><span>item2</span><span>item2</span></li>
   <li class="even"><span>item2</span><span>item2</span><span>item2</span></li>
  </ul>
 </div>

实现思路：

获得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);

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接

赞 (0)

相关推荐

  • jQuery实现的简单歌词滚动功能示例

    jQuery实现的简单歌词滚动功能示例

    本文实例讲述了jQuery实现的简单歌词滚动功能.分享给大家供大家参考,具体如下: jquery实现歌词滚动 1.css  /* CSS Document */ * { margin: 0; padding: 0; font-size: 12px; } body { background: none; } input, button, select, textarea { outline: none; } ul, li, dl, ol { list-style: none; } a { colo

  • jQuery实现判断滚动条滚动到document底部的方法分析

    本文实例讲述了jQuery实现判断滚动条滚动到document底部的方法.分享给大家供大家参考,具体如下: 滚动条没有实际的高度.只是为了呈现效果才在外型上面有长度. 在js当中也没有提供滚动条的高度API. 参考了网上有关资料:判断滚动条到底部的基本逻辑是滚动条滚动的高度加上视口的高度,正好是document的高度,公式表示为 滚动条滚动的高度+浏览器视口的高度>=document的高度. 参考网上资料,具体代码如下: //滚动条在Y轴上的滚动距离 function getScrollTop(

  • Easyui 去除jquery-easui tab页div自带滚动条的方法

    测试环境 jquery-easyui-1.5.3 需求场景 打开tab页面时,自动载入一个iframe页面,除了iframe页面本身会出现一个滚动条,tab标签页也出现一个滚动条,如下图所示,需求就是去掉tab页面的滚动条 解决方法 通过观察html页面结构,发现这个滚动条归属class为pannel-body的div 所以,解决方案,只需要添加样式即可.如下,带背景色内容: <head> -- <style type="text/css"> /*去掉easyu

  • 利用jquery和BootStrap实现动态滚动条效果

    在某项目中遇到excel导入时客户要求显示滚动条效果,在此基础上使用js为其封装了个进度条类,只需要简单为其创建个div容器就可轻松实现效果,类具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=

  • JavaScript实现的滚动公告特效【基于jQuery】

    JavaScript实现的滚动公告特效【基于jQuery】

    本文实例讲述了JavaScript实现的滚动公告.分享给大家供大家参考,具体如下: 今天给大家分享一篇滚动公告的特效. 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚动公告</title> <script src="http://libs.baidu.com/jque

  • JQuery获取元素尺寸、位置及页面滚动事件应用示例

    本文实例讲述了JQuery获取元素尺寸.位置及页面滚动事件应用.分享给大家供大家参考,具体如下: 获取元素尺寸 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://libs.baidu.com/jquery/2.0.0/jqu

  • jQuery实现当拉动滚动条到底部加载数据的方法分析

    本文实例讲述了jQuery实现当拉动滚动条到底部加载数据的方法.分享给大家供大家参考,具体如下: 滚动条到底部加载数据原理很简单,就是为window或者滚动元素添加一个scroll事件,浏览器每次触发scroll事件时判断是否滚动到了浏览器底部, 如果到了底部则加载新数据.关键是计算滚动条是否滚动到了浏览器底部,算法如下 滚动条卷起来的高度 + 窗口高度 > 文档的总高度  $(window).on('scroll',function(){ if(scrollTop() + windowHeig

  • jquery弹窗时禁止body滚动条滚动的例子

    当弹出一个jq提示窗口的时候,一般窗口右边还会有进度条的情况,禁止进度条方法 禁止浏览器滚动条滚动: $('body').css({ "overflow-x":"hidden", "overflow-y":"hidden" }); 关闭弹出的窗口的时候需要显示出来,让浏览器窗口可以继续滚动 还原滚动: $('body').css({ "overflow-x":"auto", "

  • jquery简单实现纵向的无缝滚动代码实例

    jquery简单实现纵向的无缝滚动代码实例

    简单实现纵向无缝滚动(不要忘记引入jquery文件哦) 看效果: 1.HTML代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>简单的jQuery无缝向上滚动效果</title> </head> <body> <div class="myscroll&qu

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

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

  • vue实现循环滚动列表

    本文实例为大家分享了vue实现循环滚动列表的具体代码,供大家参考,具体内容如下 1.安装 vue-seamless-scroll   实例文档链接 cnpm install vue-seamless-scroll --save 2.文件中引入,组件配置 import vueSeamlessScroll from 'vue-seamless-scroll' 3.使用 <template> <vue-seamless-scroll :data="CardPartsStatistic

  • 基于vue实现循环滚动列表功能

    基于vue实现循环滚动列表功能

    注意:需要给父容器一个height和:data='Array'和overfolw:hidden;左右滚动需要给ul容器一个初始化 css width. 先来介绍该组件的用法: 1.安装命令: cnpm install vue-seamless-scroll --save 2.main.js文件中作为全局组件引入 import scroll from 'vue-seamless-scroll' Vue.use(scroll) <vue-seamless-scroll :data="listD

  • 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> <html lang="ch">     <head>         <meta charset="UTF-8">         <title>实现一组图片的循环滚动</title>         <style type="text/cs

  • 基于jQuery的公告无限循环滚动实现代码

    在线演示:http://demo.jb51.net/js/2012/callboard/jQuery代码 复制代码 代码如下: //第二版:Newton改造 (function (win){ var callboarTimer; var callboard = $('#callboard'); var callboardUl = callboard.find('ul'); var callboardLi = callboard.find('li'); var liLen = callboard.

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

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

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

  • vue实现列表无缝循环滚动

    vue实现列表无缝循环滚动

    本文实例为大家分享了vue实现列表无缝循环滚动的具体代码,供大家参考,具体内容如下 功能介绍: 在PC端网页,包括大数据.官网.后台管理平台开发中,可能会用到这种列表循环滚动的展示. 大致需求: 1.列表可以使用数组循环遍历:2.每隔几秒中列表数据向上滚动一定距离,展示下一条数据:3.滚动到最后一条数据时重新显示第一条开始的数据(类似走马灯.banner图的循环效果): 整体思路: 1.使用两个定时器嵌套实现:2.需要两个相同容器存放同样内容,实现无缝衔接效果: 效果展示: 完整代码: <!DO

  • 基于JS实现新闻列表无缝向上滚动实例代码

    当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>文字列表无缝向上滚动代码<

  • jQuery插件实现文字无缝向上滚动效果代码

    本文实例讲述了jQuery插件实现文字无缝向上滚动效果代码.分享给大家供大家参考,具体如下: 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&

随机推荐