item上下自动循环滚动显示
1 //li 上下滚动 2 (function($){ 3 $.fn.extend({ 4 Scroll:function(opt,callback){ 5 //参数初始化 6 if(!opt) var opt={}; 7 var _btnUp = $("#"+ opt.up);//Shawphy:向上按钮 8 var _btnDown = $("#"+ opt.down);//Shawphy:向下按钮 9 var timerID; 10 var _this=this.eq(0).find("ul:first"); 11 var lineH=_this.find("li:first").height(), //获取行高 12 line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度 13 speed=opt.speed?parseInt(opt.speed,10):5000; //卷动速度，数值越大，速度越慢（毫秒） 14 timer=opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒） 15 if(line==0) line=1; 16 var upHeight=0-line*lineH; 17 //滚动函数 18 var scrollUp=function(){ 19 _btnUp.unbind("click",scrollUp); //Shawphy:取消向上按钮的函数绑定 20 _this.animate({ 21 paddingTop:upHeight 22 },speed,function(){ 23 for(i=1;i<=line;i++){ 24 _this.find("li:first").appendTo(_this); 25 } 26 console.info(_this.find("li:first")) 27 _this.css({marginTop:0}); 28 _btnUp.bind("click",scrollUp); //Shawphy:绑定向上按钮的点击事件 29 }); 30 31 } 32 //Shawphy:向下翻页函数 33 var scrollDown=function(){ 34 _btnDown.unbind("click",scrollDown); 35 for(i=1;i<=line;i++){ 36 _this.find("li:last").show().prependTo(_this); 37 } 38 _this.css({marginTop:upHeight}); 39 _this.animate({ 40 marginTop:0 41 },speed,function(){ 42 _btnDown.bind("click",scrollDown); 43 }); 44 } 45 //Shawphy:自动播放 46 var autoPlay = function(){ 47 if(timer)timerID = window.setInterval(scrollUp,timer); 48 }; 49 var autoStop = function(){ 50 if(timer)window.clearInterval(timerID); 51 }; 52 //鼠标事件绑定 53 _this.hover(autoStop,autoPlay).mouseout(); 54 _btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定 55 _btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay); 56 57 } 58 }) 59 })(jQuery);
1 $("#leaderboardList").Scroll({line:1,speed:3000,timer:3000});
1 <div id="leaderboardList"> 2 <ul id="leaderboardList_item"> 3 <!-- <li> 4 <span class="name">名字名字名字1</span> 5 <span class="good_name">产品</span> 6 </li> --> 7 </ul> 8 </div>
