五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > [原創(chuàng)]jquery scroll 滾動插件

[原創(chuàng)]jquery scroll 滾動插件

文章來源：365jz.com     點擊數(shù)：3625    更新時間：2009-09-17 10:15   參與評論

 

調(diào)用與選項

$(table).scrollIt({
  overcss:{} //外框的CSS
  offset:20, //每次移動量
  itemCount:0, //項目數(shù)
  speed:500, //滾動速度
  delay:1000, //停頓時間
  innerEL:"td", //項目的 selector
  outerEL:null, //項目的包容器的 selector 如果為null則等同于調(diào)用者
  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>


看看結(jié)果

一次滾動多行

 

<script type="text/javascript">
<!--
$(function(){
$("#u1").scrollIt({
    v:true,
    offset:60, //三行的偏移量
    itemCount:2, //一次滾動三，總條數(shù)應(yīng)該是6/3=2
    innerEL:"tr",
    overcss:{width:"200px",height:"60px",left:"50px",top:"50px"} //外框的高度也應(yīng)該調(diào)用成三倍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>

 

查看結(jié)果

橫向滾動，顯示三個，一次滾動一個

 

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

 

查看結(jié)果

縱向滾動，一行三圖片

<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

如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答?。?點擊進入論壇

發(fā)表評論 (3625人查看，0條評論)
請自覺遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī)，嚴禁發(fā)布色情、暴力、反動的言論。
昵稱：
最新評論
------分隔線----------------------------

其它欄目

· 建站教程
· 365學習

業(yè)務(wù)咨詢

· 技術(shù)支持
· 服務(wù)時間：9:00-18:00
365建站網(wǎng)二維碼

Powered by 365建站網(wǎng) RSS地圖 HTML地圖

copyright © 2013-2024 版權(quán)所有 鄂ICP備17013400號