jQuery 仿iGoogle视频的列表拖动缓冲特效

查看效果

下载地址

jQuery 仿iGoogle视频的列表拖动缓冲特效

前台部分代码

 

代码

<! 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=utf-8"   />
< title > scroll </ title >
< style  type ="text/css" >  
    * { margin : 0 ; padding : 0 }
    body {
        font-size : 12px ;
     }
    h1,#wrap {  
        width :  300px ;
        margin :  0 auto ;
        padding : 30px ;
     }
 
 
    #scroll  {  
        width :  300px ;
        height :  400px ;  
        overflow :  auto ;
        display : block ;  
        border : 1px solid #ccc ;  
        margin :  30px auto ;
     }
    #scroll li  {  
        display : block ;  
        border : 1px solid #ccc ;  
        background :  #EBCFFF ;  
        color : #333 ;  
        padding :  10px ;  
     }
    #scroll li.alt  {  
        color : #333 ;  
        background : #D9CFFF ;  
     }
</ style >
</ head >
< body >
     < h1 > 7,最终效果 </ h1 >
 
     < ul  id ="scroll"   >
         < li > 列表数据1 </ li >
         < li  class ="alt" > 列表数据2 </ li >
         < li > 列表数据3 </ li >
         < li  class ="alt" > 列表数据4 </ li >
         < li > 列表数据5 </ li >
         < li  class ="alt" > 列表数据6 </ li >
         < li > 列表数据7 </ li >
         < li  class ="alt" > 列表数据8 </ li >
         < li > 列表数据9 </ li >
         < li  class ="alt" > 列表数据10 </ li >
         < li > 列表数据11 </ li >
         < li  class ="alt" > 列表数据12 </ li >
         < li > 列表数据13 </ li >
         < li  class ="alt" > 列表数据14 </ li >
         < li > 列表数据15 </ li >
         < li  class ="alt" > 列表数据16 </ li >
         < li > 列表数据17 </ li >
         < li  class ="alt" > 列表数据18 </ li >
         < li > 列表数据19 </ li >
         < li  class ="alt" > 列表数据20 </ li >
         < li > 列表数据21 </ li >
         < li  class ="alt" > 列表数据22 </ li >
         < li > 列表数据23 </ li >
         < li  class ="alt" > 列表数据24 </ li >
         < li > 列表数据25 </ li >
         < li  class ="alt" > 列表数据26 </ li >
         < li > 列表数据27 </ li >
         < li  class ="alt" > 列表数据28 </ li >
         < li > 列表数据29 </ li >
         < li  class ="alt" > 列表数据30 </ li >
         < li > 列表数据31 </ li >
         < li  class ="alt" > 列表数据32 </ li >
         < li > 列表数据33 </ li >
         < li  class ="alt" > 列表数据34 </ li >
         < li > 列表数据35 </ li >
         < li  class ="alt" > 列表数据36 </ li >
         < li > 列表数据37 </ li >
         < li  class ="alt" > 列表数据38 </ li >
         < li > 列表数据39 </ li >
         < li  class ="alt" > 列表数据40 </ li >
     </ ul >
 
     < div  id ="wrap" >
    把滚动条去掉，把overflow:auto  -- > overflow:hidden;即可达到效果， 但直接改css这个并不太好。为什么？当用户禁用javascript的时，那么截断的部分将无法显示。所以我们仍保持css中的overflow为 auto，通过js来重新设置overflow为 hidden；当用户启用js的时候，才设置为hidden。禁用js的时候，那么列表将会出现默认的滚动条，保证了可用性。 < br />
 
     </ div >
 
     < script  src ="jquery-1.3.1.js"  type ="text/javascript" ></ script >
     < script  type ="text/javascript" >
    $( function (){    
            
         var  $ this    =   $( " #scroll " );
         var  start_hand  =   " url(start_hand.cur),pointer " ;  
         var  end_hand  =   " url(end_hand.cur),pointer " ;
         var  y  =   0 ;
 
        $ this
            .css({ " cursor " :start_hand , overflow:  " hidden " })
            .mousedown(startDrag)
            .mouseup(endDrag)
            .mouseleave(endDrag);
 
         function  startDrag(e){
            $ this .css( " cursor " , end_hand)
                 .stop( true ,  false )
                 .mousemove(moveDrag);
            y  =  e.pageY;
             return   false ;
        }
        
         function  moveDrag(e){
             var  pos_y  =  e.pageY  -  y;
            $ this .animate({scrollTop :  " -= " + pos_y}, 20 );
            y  =  e.pageY;
             return   true ;
        }
 
         function  endDrag(e){
            $ this
                .css( " cursor " , start_hand)
                .unbind( " mousemove " ,moveDrag);
             return   true ;
        }
 
    });
     </ script >

</ body >
</ html >