zoukankan      html  css  js  c++  java
  • 元素上下、左右滚动插件,固定dom结构。基于jQuery,2009年

      1 /**
      2  * @classDescription 超级Marquee,可做图片导航,图片轮换
      3  * @author Aken Li(www.kxbd.com)
      4  * @date 2009-07-27
      5  * @dependence jQuery 1.3.2
      6  * @DOM
      7  *      <div id="marquee">
      8  *          <ul>
      9  *               <li></li>
     10  *               <li></li>
     11  *          </ul>
     12  *      </div>
     13  * @CSS
     14  *      #marquee {200px;height:50px;overflow:hidden;}
     15  * @Usage
     16  *      $('#marquee').kxbdSuperMarquee(options);
     17  * @options
     18  *        distance:200,//一次滚动的距离
     19  *        duration:20,//缓动效果,单次移动时间,越小速度越快,为0时无缓动效果
     20  *        time:5,//停顿时间,单位为秒
     21  *        direction: 'left',//滚动方向,'left','right','up','down'
     22  *        scrollAmount:1,//步长
     23  *        scrollDelay:20//时长,单位为毫秒
     24  *        isEqual:true,//所有滚动的元素长宽是否相等,true,false
     25  *        loop: 0,//循环滚动次数,0时无限
     26  *        btnGo:{left:'#goL',right:'#goR'},//控制方向的按钮ID,有四个属性left,right,up,down分别对应四个方向
     27  *        eventGo:'click',//鼠标事件
     28  *        controlBtn:{left:'#goL',right:'#goR'},//控制加速滚动的按钮ID,有四个属性left,right,up,down分别对应四个方向
     29  *        newAmount:4,//加速滚动的步长
     30  *        eventA:'mouseenter',//鼠标事件,加速
     31  *        eventB:'mouseleave',//鼠标事件,原速
     32  *        navId:'#marqueeNav', //导航容器ID,导航DOM:<ul><li>1</li><li>2</li><ul>,导航CSS:.navOn
     33  *        eventNav:'click' //导航事件
     34  */
     35 (function($){
     36     $.fn.kxbdSuperMarquee = function(options){
     37         var opts = $.extend({},$.fn.kxbdSuperMarquee.defaults, options);
     38         return this.each(function(){
     39             var $marquee = $(this);//滚动元素容器
     40             var _scrollObj = $marquee.get(0);//滚动元素容器DOM
     41             var scrollW = $marquee.width();//滚动元素容器的宽度
     42             var scrollH = $marquee.height();//滚动元素容器的高度
     43             var $element = $marquee.children(); //滚动元素
     44             var $kids = $element.children();//滚动子元素
     45             var scrollSize=0;//滚动元素尺寸
     46             var _type = (opts.direction == 'left' || opts.direction == 'right') ? 1:0;//滚动类型,1左右,0上下
     47             var scrollId, rollId, isMove, marqueeId;
     48             var t,b,c,d,e; //滚动动画的参数,t:当前时间,b:开始的位置,c:改变的位置,d:持续的时间,e:结束的位置
     49             var _size, _len; //子元素的尺寸与个数
     50             var $nav,$navBtns;
     51             var arrPos = []; 
     52             var numView = 0; //当前所看子元素
     53             var numRoll=0; //轮换的次数
     54             var numMoved = 0;//已经移动的距离
     55             //防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度
     56             $element.css(_type?'width':'height',10000);
     57             //获取滚动元素的尺寸
     58             var navHtml = '<ul>';
     59             if (opts.isEqual) {
     60                 _size = $kids[_type?'outerWidth':'outerHeight']();
     61                 _len = $kids.length;
     62                 scrollSize = _size * _len;
     63                 for(var i=0;i<_len;i++){
     64                     arrPos.push(i*_size);
     65                     navHtml += '<li>'+ (i+1) +'</li>';
     66                 }
     67             }else{
     68                 $kids.each(function(i){
     69                     arrPos.push(scrollSize);
     70                     scrollSize += $(this)[_type?'outerWidth':'outerHeight']();
     71                     navHtml += '<li>'+ (i+1) +'</li>';
     72                 });
     73             }
     74             navHtml += '</ul>';
     75             
     76             //滚动元素总尺寸小于容器尺寸,不滚动
     77             if (scrollSize<(_type?scrollW:scrollH)) return; 
     78             //克隆滚动子元素将其插入到滚动元素后,并设定滚动元素宽度
     79             $element.append($kids.clone()).css(_type?'width':'height',scrollSize*2);
     80             
     81             //轮换导航
     82             if (opts.navId) {
     83                 $nav = $(opts.navId).append(navHtml).hover( stop, start );
     84                 $navBtns = $('li', $nav);
     85                 $navBtns.each(function(i){
     86                     $(this).bind(opts.eventNav,function(){
     87                         if(isMove) return;
     88                         if(numView==i) return;
     89                         rollFunc(arrPos[i]);
     90                         $navBtns.eq(numView).removeClass('navOn');
     91                         numView = i;
     92                         $(this).addClass('navOn');
     93                     });
     94                 });
     95                 $navBtns.eq(numView).addClass('navOn');
     96             }
     97             
     98             //设定初始位置
     99             if (opts.direction == 'right' || opts.direction == 'down') {
    100                 _scrollObj[_type?'scrollLeft':'scrollTop'] = scrollSize;
    101             }else{
    102                 _scrollObj[_type?'scrollLeft':'scrollTop'] = 0;
    103             }
    104             
    105             if(opts.isMarquee){
    106                 //滚动开始
    107                 //marqueeId = setInterval(scrollFunc, opts.scrollDelay);
    108                 marqueeId = setTimeout(scrollFunc, opts.scrollDelay);
    109                 //鼠标划过停止滚动
    110                 $marquee.hover(
    111                     function(){
    112                         clearInterval(marqueeId);
    113                     },
    114                     function(){
    115                         //marqueeId = setInterval(scrollFunc, opts.scrollDelay);
    116                         clearInterval(marqueeId);
    117                         marqueeId = setTimeout(scrollFunc, opts.scrollDelay);
    118                     }
    119                 );
    120                 
    121                 //控制加速运动
    122                 if(opts.controlBtn){
    123                     $.each(opts.controlBtn, function(i,val){
    124                         $(val).bind(opts.eventA,function(){
    125                             opts.direction = i;
    126                             opts.oldAmount = opts.scrollAmount;
    127                             opts.scrollAmount = opts.newAmount;
    128                         }).bind(opts.eventB,function(){
    129                             opts.scrollAmount = opts.oldAmount;
    130                         });
    131                     });
    132                 }
    133             }else{
    134                 if(opts.isAuto){
    135                     //轮换开始
    136                     start();
    137                     
    138                     //鼠标划过停止轮换
    139                     $marquee.hover( stop, start );
    140                 }
    141             
    142                 //控制前后走
    143                 if(opts.btnGo){
    144                     $.each(opts.btnGo, function(i,val){
    145                         $(val).bind(opts.eventGo,function(){
    146                             if(isMove == true) return;
    147                             opts.direction = i;
    148                             rollFunc();
    149                             if (opts.isAuto) {
    150                                 stop();
    151                                 start();
    152                             }
    153                         });
    154                     });
    155                 }
    156             }
    157             
    158             function scrollFunc(){
    159                 var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';
    160                 
    161                 if(opts.isMarquee){
    162                     if (opts.loop > 0) {
    163                         numMoved+=opts.scrollAmount;
    164                         if(numMoved>scrollSize*opts.loop){
    165                             _scrollObj[_dir] = 0;
    166                             return clearInterval(marqueeId);
    167                         } 
    168                     }
    169                     var newPos = _scrollObj[_dir]+(opts.direction == 'left' || opts.direction == 'up'?1:-1)*opts.scrollAmount;
    170                 }else{
    171                     if(opts.duration){
    172                         if(t++<d){
    173                             isMove = true;
    174                             var newPos = Math.ceil(easeOutQuad(t,b,c,d));
    175                             if(t==d){
    176                                 newPos = e;
    177                             }
    178                         }else{
    179                             newPos = e;
    180                             clearInterval(scrollId);
    181                             isMove = false;
    182                             return;
    183                         }
    184                     }else{
    185                         var newPos = e;
    186                         clearInterval(scrollId);
    187                     }
    188                 }
    189                 
    190                 if(opts.direction == 'left' || opts.direction == 'up'){
    191                     if(newPos>=scrollSize){
    192                         newPos-=scrollSize;
    193                     }
    194                 }else{
    195                     if(newPos<=0){
    196                         newPos+=scrollSize;
    197                     }
    198                 }
    199                 _scrollObj[_dir] = newPos;
    200                 
    201                 if(opts.isMarquee){
    202                     marqueeId = setTimeout(scrollFunc, opts.scrollDelay);
    203                 }else if(t<d){
    204                     if(scrollId) clearTimeout(scrollId);
    205                     scrollId = setTimeout(scrollFunc, opts.scrollDelay);
    206                 }else{
    207                     isMove = false;
    208                 }
    209                 
    210             };
    211             
    212             function rollFunc(pPos){
    213                 isMove = true;
    214                 var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';
    215                 var _neg = opts.direction == 'left' || opts.direction == 'up'?1:-1;
    216 
    217                 numRoll = numRoll +_neg;
    218                 //得到当前所看元素序号并改变导航CSS
    219                 if(pPos == undefined&&opts.navId){
    220                     $navBtns.eq(numView).removeClass('navOn');
    221                     numView +=_neg;
    222                     if(numView>=_len){
    223                         numView = 0;
    224                     }else if(numView<0){
    225                         numView = _len-1;
    226                     }
    227                     $navBtns.eq(numView).addClass('navOn');
    228                     numRoll = numView;
    229                 }
    230 
    231                 var _temp = numRoll<0?scrollSize:0;
    232                 t=0;
    233                 b=_scrollObj[_dir];
    234                 //c=(pPos != undefined)?pPos:_neg*opts.distance;
    235                 e=(pPos != undefined)?pPos:_temp+(opts.distance*numRoll)%scrollSize;
    236                 if(_neg==1){
    237                     if(e>b){
    238                         c = e-b;
    239                     }else{
    240                         c = e+scrollSize -b;
    241                     }
    242                 }else{
    243                     if(e>b){
    244                         c =e-scrollSize-b;
    245                     }else{
    246                         c = e-b;
    247                     }
    248                 }
    249                 d=opts.duration;
    250                 //scrollId = setInterval(scrollFunc, opts.scrollDelay);
    251                 if(scrollId) clearTimeout(scrollId);
    252                 scrollId = setTimeout(scrollFunc, opts.scrollDelay);
    253             }
    254             function start(){
    255                 rollId = setInterval(function(){
    256                     rollFunc();
    257                 }, opts.time*1000);
    258             }
    259             function stop(){
    260                 clearInterval(rollId);
    261             }
    262             function easeOutQuad(t,b,c,d){
    263                 return -c *(t/=d)*(t-2) + b;
    264             }
    265             function easeOutQuint(t,b,c,d){
    266                 return c*((t=t/d-1)*t*t*t*t + 1) + b;
    267             }
    268         });
    269     };
    270     $.fn.kxbdSuperMarquee.defaults = {
    271         isMarquee:false,//是否为Marquee
    272         isEqual:true,//所有滚动的元素长宽是否相等,true,false
    273         loop: 0,//循环滚动次数,0时无限
    274         newAmount:3,//加速滚动的步长
    275         eventA:'mousedown',//鼠标事件,加速
    276         eventB:'mouseup',//鼠标事件,原速
    277         isAuto:true,//是否自动轮换
    278         time:5,//停顿时间,单位为秒
    279         duration:50,//缓动效果,单次移动时间,越小速度越快,为0时无缓动效果
    280         eventGo:'click', //鼠标事件,向前向后走
    281         direction: 'left',//滚动方向,'left','right','up','down'
    282         scrollAmount:1,//步长
    283         scrollDelay:10,//时长
    284         eventNav:'click'//导航事件
    285     };
    286     
    287     $.fn.kxbdSuperMarquee.setDefaults = function(settings) {
    288         $.extend( $.fn.kxbdSuperMarquee.defaults, settings );
    289     };
    290     
    291 })(jQuery);

     使用:

     1 <div class="fl adcon" id="adcon">
     2     <ul class="admsg">
     3         <li class="date">浙江何氏村落何斯路村打造自己的文化气质</li>
     4         <li class="date">论姓氏文化研究社团在国家经济建设主战场中的地位</li>
     5         <li class="date">***412被捕 鲍靖中搭救脱险</li>
     6         <li class="date">浙江何氏村落何斯路村打造自己的文化气质浙江何氏村落何斯路村打造自己的文化气质</li>
     7         <li class="date">论姓氏文化研究社团在国家经济建设主战场中的地位论姓氏文化研究社团在国家经济建设主战场中的地位</li>
     8         <li class="date">***412被捕 鲍靖中搭救脱险***412被捕 鲍靖中搭救脱险</li>
     9     </ul>
    10 </div>
        $(function(){
            $("#adcon").kxbdSuperMarquee({
                isEqual:false,
                distance:25,
                time:5,
                direction:"up"
            })
        })
  • 相关阅读:
    shell习题第21题:计算数字的个数
    shell习题第20题:统计文件大小
    萌新小白
    编程第一天
    萌新报道
    linux下安装php扩展pdo_oci和oci8
    安装Hadoop伪分布式踩过的坑
    zabbix安装过程
    MySQL_索引
    mysql复制
  • 原文地址:https://www.cnblogs.com/Millet-23/p/9600000.html
Copyright © 2011-2022 走看看