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 >
< 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 >