[原创]jquery scroll 滚动插件
文章来源：365jz.com 点击数：3610 更新时间：2009-09-17 10:15 参与评论
调用与选项
$(table).scrollIt({
overcss:{} //外框的CSS
offset:20, //每次移动量
itemCount:0, //项目数
speed:500, //滚动速度
delay:1000, //停顿时间
innerEL:"td", //项目的 selector
outerEL:null, //项目的包容器的 selector 如果为null则等同于调用者
hover:true, //鼠标移过是否停止
v:false //横向还是纵向
});
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>
<!--
$(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>
<!--
$(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>
<!--
$(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>
<!--
$(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>
查看演示
下载插件与范例
Tag标签: jQueryUI
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
------分隔线----------------------------
- 上一篇：.NET object to JSON
- 下一篇：在网页右侧悬浮QQ客服
