zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    关于Mysql几周的整理文档
    压力开关
    【团队】汇总
    2017级面向对象程序设计——团队作业1
    东风吹十里,风华一笔得。
    【团队】实验品
    【2017级面向对象程序设计】作业四
    【C#】C#学习笔记_1
    【2017级面向对象程序设计】作业三
    【2017级面向对象程序设计】作业二
  • 原文地址:https://www.cnblogs.com/zhanghuiyun/p/5726206.html
Copyright © 2011-2022 走看看