//li 上下滚动
(function($){
$.fn.extend({
Scroll:function(opt,callback){
//参数初始化
if(!opt) var opt={};
var _btnUp = $("#"+ opt.up);//Shawphy:向上按钮
var _btnDown = $("#"+ opt.down);//Shawphy:向下按钮
var timerID;
var _this=this.eq(0).find("ul:first");
var lineH=_this.find("li:first").height(), //获取行高
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数,默认为一屏,即父容器高度
speed=opt.speed?parseInt(opt.speed,10):5000; //卷动速度,数值越大,速度越慢(毫秒)
timer=opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔(毫秒)
if(line==0) line=1;
var upHeight=0-line*lineH;
//滚动函数
var scrollUp=function(){
_btnUp.unbind("click",scrollUp); //Shawphy:取消向上按钮的函数绑定
_this.animate({
paddingTop:upHeight
},speed,function(){
for(i=1;i<=line;i++){
_this.find("li:first").appendTo(_this);
}
console.info(_this.find("li:first"))
_this.css({marginTop:0});
_btnUp.bind("click",scrollUp); //Shawphy:绑定向上按钮的点击事件
}); }
//Shawphy:向下翻页函数
var scrollDown=function(){
_btnDown.unbind("click",scrollDown);
for(i=1;i<=line;i++){
_this.find("li:last").show().prependTo(_this);
}
_this.css({marginTop:upHeight});
_this.animate({
marginTop:0
},speed,function(){
_btnDown.bind("click",scrollDown);
});
}
//Shawphy:自动播放
var autoPlay = function(){
if(timer)timerID = window.setInterval(scrollUp,timer);
};
var autoStop = function(){
if(timer)window.clearInterval(timerID);
};
//鼠标事件绑定
_this.hover(autoStop,autoPlay).mouseout();
_btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定
_btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay); }
})
})(jQuery);

$("#leaderboardList").Scroll({line:1,speed:3000,timer:3000});

 <div id="leaderboardList">
<ul id="leaderboardList_item">
<!-- <li>
<span class="name">名字名字名字1</span>
<span class="good_name">产品</span>
</li> -->
</ul>
</div>

item上下自动循环滚动显示的更多相关文章

  1. ListView的自动循环滚动显示

    最近项目里需要做评价内容的循环滚动显示,一开始想到的就是定时器.后来查了资料才知道ListView里面有个函数smoothScrollToPosition(position),瞬间觉得简单了很多.首先 ...

  2. UIScrollView实现自动循环滚动广告

    实现效果如下: 功能说明: 程序运行,图片自动循环播放,采用定时器实现; 当用户用手势触摸滑动时,定时器的自动播放取消,停止触摸时,自动无限播放; 代码如下 : 采用封装视图,外部进行调用即可: 1. ...

  3. jQuery 实现列表自动滚动循环滚动显示新闻通知

    需求 页面中一个小区域循环滚动展示通知(公告.新闻.活动.图片等),并且鼠标hover时停止滚动并提示,鼠标离开后,继续滚动. 效果图 https://www.iguopin.com/index.ph ...

  4. 使用Recyclerview实现图片水平自动循环滚动

    简介: 本篇博客主要介绍的是如何使用RecyclerView实现图片水平方向自动循环(跑马灯效果) 效果图: 思路: 1.准备m张图片 1.使用Recyclerview实现,返回无数个(实际Inter ...

  5. IOS实现自动循环滚动广告--ScrollView的优化和封装

    一.问题分析 在许多App中,我们都会见到循环滚动的视图,比如广告,其实想实现这个功能并不难,用ScrollView就可以轻松完成,但是在制作的过程中还存在几个小问题,如果能够正确的处理好这些小问题, ...

  6. 自动循环滚动ScrollView

    // // SBCycleScrollView.h // SBCycleScrollView // // Created by luo.h on 15/7/12. // Copyright (c) 2 ...

  7. IOS无限自动循环滚动banner(源码)

    本文转载至 http://blog.csdn.net/iunion/article/details/19080259  目前有很多APP都开始使用一些滚动banner,我自己也做了一个,部分算法没有深 ...

  8. UIScrollView现实自动循环滚动

    #import "RootViewController.h" #define width [UIScreen mainScreen].bounds.size.width #defi ...

  9. NGUI实现的一套不同大小 Item 的循环滚动代码

    测试: 数据 & Item  的 Ctrl : using UnityEngine; public class ScrollViewItemData { public int index; p ...

随机推荐

  1. c#简易计算器

    微软MSDN的代码库就有示例 http://code.msdn.microsoft.com/Simple-Calculator-54ec8e4a using System; using System. ...

  2. POJ 3597 Polygon Division (DP)

    题目链接 题意:把一个正多边形分成数个三角形或者四边形,问有多少种方案. 题解: 如果分出的全为三角形的话,那就是正多边形三角剖分问题.它的结果就是Catalan数.现在也可以划分出四边形的话,可以采 ...

  3. java调用cmd命令删除文件夹及其所有内容

    /** * *删除D盘下面test目录,感觉以前用io流遍历删除好慢! * **/ public static void main(String[] args) { Runtime run = Run ...

  4. Sql如何自动定时备份数据库

    直接上图

  5. VS工程目标文件名设置

    默认的输出文件名是$(ProjectName) 可以在项目属性-配置属性-常规-目标文件名中设置 例如我想在Debug版本的输出文件加一个后缀d,那么我可以这样设置:$(ProjectName)d

  6. springmvc注解配置

    <?xml version="1.0" encoding="UTF-8" ?> <beans xmlns="http://www.s ...

  7. NYOJ之奇偶数分离

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAscAAAJ8CAIAAACdmZvPAAAgAElEQVR4nO3dPVLjStsG4G8T5CyEFC

  8. UVA 624 CD

    主要是打印路径有点麻烦,然后就是用于标记的数组要开大点,不然会狂wa不止,而且还不告诉你re #include <cstdio> #include <iostream> #in ...

  9. Lattice Diamond 的学习之新建工程

    1).打开软件 在软件打开后的初始布局会有一个Start  page 可以创建.打开.导入一个ISPLEVER 工程. 2).建立工程:1,Start page 中Project --> NEW ...

  10. MVC – 6.控制器 Action方法参数与返回值

      6.1 Controller接收浏览器数据   a.获取Get数据 : a1:获取路由url中配置好的制定参数: 如配置好的路由: 浏览器请求路径为: /User/Modify/1 ,MVC框架获 ...