您现在的位置: 365建站网 > 365学习 > [原创]jquery scroll 滚动插件

[原创]jquery scroll 滚动插件

文章来源:365jz.com     点击数:3548    更新时间: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 //横向还是纵向
});

 

单行滚动

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

 

查看演示

下载插件与范例

收藏与分享
Tag标签: jQueryUI

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (3548人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------