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 ...
随机推荐
- 【CCL】连通区域提取
根据朋友给的一份原理写的 感觉还挺清楚 #include "cv.h" #include "highgui.h" #include <stdio.h> ...
- SQLServer触发器
触发器的作用: 自动化操作,减少了手动操作以及出错的几率. 触发器是一种特殊类型的存储过程,它不同于前面介绍过的一般的存储过程. [在SQL内部把触发器看做是存储过程但是不能传递参数] 一般的存储过程 ...
- 柔性数组 data[0]
struct MyData { int nLen; char data[0];}; 在结构中,data是一个数组名:但该数组没有元素:该数组的真实地址紧随结构体MyData之后,而这个地址 ...
- DB2 上copy表结构及数据
现已有一行数据,要复制为多行,每行只有两个字段值不同,db2 没有sql server的top关键字,本只想复制几次,然后update逐条数据,发现不行. 然后想到不如临时创建一张表B,插入此行数据, ...
- Android高性能ORM数据库DBFlow入门
DBFlow,综合了 ActiveAndroid, Schematic, Ollie,Sprinkles 等库的优点.同时不是基于反射,所以性能也是非常高,效率紧跟greenDAO其后.基于注解,使用 ...
- xdg-open filename 以相应的程序 打开文件
[root@ok network-scripts]# xdg-open ifcfg-eth0
- MangoDB的C#Driver驱动简单例子
以下是本人学习C#Driver驱动简单的学习例子.GridFS的增删查操作 和 表的增删查改操作. public class MongoServerHelper { public static str ...
- Bitmap在Java中的实现和应用
>>40亿数据排序问题 给定一个最多包含40亿个随机排列的32位整数的顺序文件,找出一个不在文件中的32位整数(在文件中至少缺失这样一个数——为什么?).在具有足够内存的情况下,如何解决该 ...
- android:installLocation = "auto" 的用法
在Froyo(android 2.2,API Level:8)中引入了android:installLocation.通过设置该属性可以使得开发者以及用户决定程序的安装位置. android:inst ...
- 【翻译四】java-并发之线程暂停
Pausing Execution with Sleep Thread.sleep causes the current thread to suspend execution for a speci ...