[原创]jquery scroll 滚动插件

 

调用与选项

$(table).scrollIt({
  overcss:{}  // 外框的CSS
  offset: 20 ,  // 每次移动量
  itemCount: 0 ,  // 项目数
  speed: 500 ,  // 滚动速度
  delay: 1000 ,  // 停顿时间
  innerEL: " td " ,  // 项目的 selector
  outerEL: null ,  // 项目的包容器的 selector 如果为null则等同于调用者
  hover: true ,  // 鼠标移过是否停止
  v: false   // 横向还是纵向
});

 

单行滚动

< script  type ="text/javascript" >
<!--
$( function (){
$( " #u1 " ).scrollIt({
    v: true ,  // 纵向
    offset: 20 ,  // 一次滚动量
    innerEL: " tr " ,  // 滚动项目
    overcss:{width: " 200px " ,height: " 20px " ,left: " 50px " ,top: " 50px " }  // 外框大小与位置
});
});
// -->
</ script >

< table  id ='u1'  cellspacing =0  cellpadding =0 >
< tr  height ="20" >< td  width ="100px" > 111111 </ td ></ tr >
< tr  height ="20" >< td  width ="100px" > 222222 </ td ></ tr >
< tr  height ="20" >< td  width ="100px" > 33333 </ td ></ tr >
< tr  height ="20" >< td  width ="100px" > 444444 </ td ></ tr >
< tr  height ="20" >< td  width ="100px" > 555555555 </ td ></ tr >
< tr  height ="20" >< td  width ="100px" > 666666666 </ td ></ tr >
</ table >

看看结果

一次滚动多行

 

< script  type ="text/javascript" >
<!--
$( function (){
$( " #u1 " ).scrollIt({
    v: true ,
    offset: 60 ,  // 三行的偏移量
    itemCount: 2 ,  // 一次滚动三，总条数应该是6/3=2
    innerEL: " tr " ,
    overcss:{width: " 200px " ,height: " 60px " ,left: " 50px " ,top: " 50px " }  // 外框的高度也应该调用成三倍60px
});
});
// -->
</ script >

< table  id ='u1'  cellspacing =0  cellpadding =0 >
< tr  height ="20" >< td  width ="100px" > 111111 </ td ></ tr >
< tr  height ="20" >< td  width ="100px" > 222222 </ td ></ tr >
< tr  height ="20" >< td  width ="100px" > 33333 </ td ></ tr >
< tr  height ="20" >< td  width ="100px" > 444444 </ td ></ tr >
< tr  height ="20" >< td  width ="100px" > 555555555 </ td ></ tr >
< tr  height ="20" >< td  width ="100px" > 666666666 </ td ></ tr >
</ table >

 

查看结果

横向滚动，显示三个，一次滚动一个

 

< script  type ="text/javascript" >
<!--
$( function (){
$( " #u2 " ).scrollIt({
    offset: 100 , // 每次滚动100，即一个
    itemCount: 3 ,
    innerEL: " td " , // 滚动的项目为TD
    outerEL: " tr " , // TD的父包元素为TR
    overcss:{width: " 300px " ,height: " 100px " ,left: " 50px " ,top: " 50px " }  // 显示三个即300px
});
});
// -->
</ script >
< table  id ="u2"  cellspacing =0  cellpadding =0 >< tr  height ="100" >
< td  >< div >< img  src ='images/sunset.jpg'  width =100  height =100 /></ div ></ td >
< td >< div >< img  src ='images/blue  hills.jpg' width =100  height =100 /></ div ></ td >
< td >< div >< img  src ='images/water  lilies.jpg' width =100  height =100 /></ div ></ td >
</ tr ></ table >

 

查看结果

纵向滚动，一行三图片

< script  type ="text/javascript" >
<!--
$( function (){
$( " #u3 " ).scrollIt({
    v: true ,
    offset: 100 ,
    itemCount: 2 ,
    innerEL: " tr " ,
    overcss:{width: " 300px " ,height: " 100px " ,left: " 50px " ,top: " 50px " }
});
});
// -->
</ script >
< table  id ="u3"  cellspacing =0  cellpadding =0 >< tr  height ="100" >
< td  >< div >< img  src ='images/sunset.jpg'  width =100  height =100 /></ div ></ td >
< td >< div >< img  src ='images/blue  hills.jpg' width =100  height =100 /></ div ></ td >
< td >< div >< img  src ='images/water  lilies.jpg' width =100  height =100 /></ div ></ td >
</ tr >
< tr  height ="100" >
< td  >< div >< img  src ='images/water  lilies.jpg' width =100  height =100 /></ div ></ td >
< td >< div >< img  src ='images/blue  hills.jpg' width =100  height =100 /></ div ></ td >
< td >< div >< img  src ='images/sunset.jpg'  width =100  height =100 /></ div ></ td >
</ tr >
< tr  height ="100" >
< td  >< div >< img  src ='images/blue  hills.jpg' width =100  height =100 /></ div ></ td >
< td >< div >< img  src ='images/sunset.jpg'  width =100  height =100 /></ div ></ td >
< td >< div >< img  src ='images/water  lilies.jpg' width =100  height =100 /></ div ></ td >
</ tr >
</ table >

 

查看演示

下载插件与范例

转载于:https://www.cnblogs.com/fdszlzl/archive/2009/07/04/1516904.html