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 ...
随机推荐
- September 1st 2016 Week 36th Thursday
Everything is going on, but don't give up trying. 万事随缘,但不要放弃努力. There are numerous things that we ca ...
- chrome shortcutkey
按下Shift并点击链接 – 在新窗口打开链接. Ctrl+ – 切换到最后一个标签. Ctrl+Shift+V – 将剪切板中的内容无格式粘贴(举个例子,将你从网页中复制的HTML格式内容粘贴为纯文 ...
- 模拟赛1031d2
巧克力棒(chocolate)Time Limit:1000ms Memory Limit:64MB题目描述LYK 找到了一根巧克力棒,但是这根巧克力棒太长了, LYK 无法一口吞进去.具体地,这根巧 ...
- 转载_虚拟机下LInux(终端)配置网络的方法
出自: http://www.360doc.com/content/14/1027/11/17496895_420258403.shtml 对文章的重点进行剪贴,方便查看. 这几天在虚拟机vmware ...
- iPhone:4.7 5.5 4 3.5 对应的各个设备屏幕尺寸对应的像素及App上线信息
Shared App Information You can access these properties from the App Details page in the App Informat ...
- DB2 Z/os Load utility 使用
Use the LOAD online utility to load one or more tables of a table space. The LOAD utility loads reco ...
- mysql 三个表连接查询
权限表(permission)10 字段名称 类型 约束 描述 authorityid integer Pk not null 权限流水号id PK userNameId int not nul ...
- IT人学习方法论(一):学习方向
07年的时候曾经讲过一节Webcast,名叫<使您成为Windows专家的一些学习习惯 >.直到最近,还经常收到听众关于这一节课反馈和心得的电子邮件,可见学习方法论是大家非常关心的问题.因 ...
- iOS 判断第一个字符是数字还是汉字
NSString *titleStr = @"琳小兮"; //先截取字符串,拿到第一个字符 NSString *firstStr = [titleStr s ...
- Jcapta
http://blog.csdn.net/shadowsick/article/details/8575471