item上下自动循环滚动显示
//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上下自动循环滚动显示的更多相关文章
- ListView的自动循环滚动显示
最近项目里需要做评价内容的循环滚动显示,一开始想到的就是定时器.后来查了资料才知道ListView里面有个函数smoothScrollToPosition(position),瞬间觉得简单了很多.首先 ...
- UIScrollView实现自动循环滚动广告
实现效果如下: 功能说明: 程序运行,图片自动循环播放,采用定时器实现; 当用户用手势触摸滑动时,定时器的自动播放取消,停止触摸时,自动无限播放; 代码如下 : 采用封装视图,外部进行调用即可: 1. ...
- jQuery 实现列表自动滚动循环滚动显示新闻通知
需求 页面中一个小区域循环滚动展示通知(公告.新闻.活动.图片等),并且鼠标hover时停止滚动并提示,鼠标离开后,继续滚动. 效果图 https://www.iguopin.com/index.ph ...
- 使用Recyclerview实现图片水平自动循环滚动
简介: 本篇博客主要介绍的是如何使用RecyclerView实现图片水平方向自动循环(跑马灯效果) 效果图: 思路: 1.准备m张图片 1.使用Recyclerview实现,返回无数个(实际Inter ...
- IOS实现自动循环滚动广告--ScrollView的优化和封装
一.问题分析 在许多App中,我们都会见到循环滚动的视图,比如广告,其实想实现这个功能并不难,用ScrollView就可以轻松完成,但是在制作的过程中还存在几个小问题,如果能够正确的处理好这些小问题, ...
- 自动循环滚动ScrollView
// // SBCycleScrollView.h // SBCycleScrollView // // Created by luo.h on 15/7/12. // Copyright (c) 2 ...
- IOS无限自动循环滚动banner(源码)
本文转载至 http://blog.csdn.net/iunion/article/details/19080259 目前有很多APP都开始使用一些滚动banner,我自己也做了一个,部分算法没有深 ...
- UIScrollView现实自动循环滚动
#import "RootViewController.h" #define width [UIScreen mainScreen].bounds.size.width #defi ...
- NGUI实现的一套不同大小 Item 的循环滚动代码
测试: 数据 & Item 的 Ctrl : using UnityEngine; public class ScrollViewItemData { public int index; p ...
随机推荐
- 【leetcode】 Unique Binary Search Trees (middle)☆
Find the contiguous subarray within an array (containing at least one number) which has the largest ...
- 【python】 urllib.unquote()
来源:http://blog.csdn.net/anhuidelinger/article/details/10096727 urllib.unquote() 字符串被当作url提交时会被自动进行ur ...
- Qt 扫描进程列表以及获取进程信息
使用方法: QMap<QString,qint64> app_pid; getAllAppPidList( app_pid ); #include <tlhelp32.h>// ...
- CSS3实现文字抹开特效
CSS: .column-title { color: #9b9b9b; text-shadow: 1px 1px #d4d4d4;}.column-title:hover { color: #5a5 ...
- hdu5878(枚举,打表)
题目链接:hdu5878 题意:到一行输入t,表示下面有t组数据,然后下面t行每行输入一个数n; 定义x==2^a*3^b*5^c*7^d(a, b, c, d为自然数,x不大于1e+9): 要求对于 ...
- NYOJ之素数求和问题
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsoAAAKCCAIAAABH/2gWAAAgAElEQVR4nO3dPVLjStsG4G8T5CyEdF
- MVC缓存01,使用控制器缓存或数据层缓存
对一些浏览频次多.数据量大的数据,使用缓存会比较好,而对一些浏览频次低,或内容因用户不同的,不太适合使用缓存. 在控制器层面,MVC为我们提供了OutputCacheAttribute特性:在数据 ...
- Delphi之DLL知识学习2---静态链接和动态链接
静态连接 静态链接是指Delphi 编译器把要调用的函数和过程编译成可执行代码.函数的代码可存留在应用程序的 .dpr文件或一单元中.当链接用户的应用程序时,这些函数与过程便成为最终的可执行文件的一部 ...
- hdu 2393:Higher Math(计算几何,水题)
Higher Math Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...