• jquery extend 内容滚动带按钮控制


    代码
    
    Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
     <title>无标题文档</title>
     <style type="text/css">
     ul,li{margin:0;padding:0}
     #scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
     #scrollDiv li{height:25px;padding-left:10px;}
     </style>
     <script type="text/javascript" src="jquery-1.1.3.pack.js"></script>
     <script type="text/javascript">
     (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):500; //卷动速度,数值越大,速度越慢(毫秒)
                             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({
                                     marginTop:upHeight
                             },speed,function(){
                                     for(i=1;i<=line;i++){
                                             _this.find("li:first").appendTo(_this);
                                     }
                                     _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);
     
     $(document).ready(function(){
             $("#scrollDiv").Scroll({line:4,speed:500,timer:3000,up:"btn2",down:"btn1"});
     });
     </script>
     </head>
     
     <body>
     <p>多行滚动演示:</p>
     <div id="scrollDiv">
       <ul>
         <li>这是公告标题的第一行</li>
         <li>这是公告标题的第二行</li>
         <li>这是公告标题的第三行</li>
         <li>这是公告标题的第四行</li>
         <li>这是公告标题的第五行</li>
         <li>这是公告标题的第六行</li>
         <li>这是公告标题的第七行</li>
         <li>这是公告标题的第八行</li>
       </ul>
     </div>
     
     <span id="btn1">down</span>
     <br/>
     <span id="btn2">up</span>
     102 
     件
     </body>
     </html>

    这段代码只是多行滚动。

    1。首先一个<div id="scrollDiv">高度限制是100px,而每行是25px,总共只能显示4行,但div中有八行。那怎么显示呢?

    scrollDiv属性中有个overflow:hidden表示不能显示的则隐藏。

    2。第二个问题是 哪四行显示在<div id="scrollDiv">中,由于_this.find("li:first").appendTo(_this);将前面的四行剪切插入到后面,并且设置高度是从0开始,这样就只能显示前四行。_this.find("li:last").show().prependTo(_this);同理将后面四行插入到前面去。

    3。第三个问题是animate,它是jquery的一个函数,起到动画效应。但_btnDown.unbind("click",scrollDown);为何绑定了又要解开呢。这是因为当点击down时,将执行scrollDown函数,当执行到里面去时要解开绑定,以免此时再点击down时又执行scrollDown函数,导致混乱,只有执行完滚动后再绑定。

    4。当不点击时,也会自动滚动。那时因为有个_this.hover(autoStop,autoPlay).mouseout();

    jQuery中的hover方法是个非常常用的方法,接受二个参数,第一个参数为鼠标移入对象时触发的事件,第二个参数为鼠标移出对象时触发的事
    5。$("#scrollDiv").Scroll({line:4,speed:500,timer:3000,up:"btn2",down:"btn1"});调用了Scroll 执行了:function(opt,callback),这里面却只传了opt,这里面没有callback函数。而且传参数也非常奇怪。不过就当它能这样传,相当于一个object,传过来也。

    希望懂得更多的拍砖。

  • 相关阅读:
    学习OSGI---建项目,运行配置
    MongoDB 安装
    利用 ^ 异或运算符 进行交换(不需要第三方变量)
    2019HDU暑期多校训练-1004equation-方程求解
    HDU 4417-Super Mario-线段树+离线
    HDU 3333-Turing Tree-线段树+离散+离线
    POJ 2528-Mayor's posters-线段树+离散化
    POJ 2631-Roads in the North-树的直径
    POJ 2299-Ultra-QuickSort-线段树的两种建树方式
    noip2009最优贸易——spfa
  • 原文地址:https://www.cnblogs.com/piuba/p/2652474.html
Copyright © 2020-2023  润新知