義烏市羅蘭700印刷機長(cháng)近期招聘情況
scrollable提供的一系列獲取scrollable對象的方法具體使用方式如下：
復制代碼 代碼如下:
var scrollable=$("div.scrollable").scrollable();
????//alert(scrollable.getConf().prev);//獲取配置對象中的prev屬性
????scrollable.getConf().speed=200;//設置配置對象的speed屬性
????//alert(scrollable.getIndex());//獲取當前滾動(dòng)項的索引
????//alert(scrollable.getItems().length);//獲取當前滾動(dòng)項的數量
????//alert(scrollable.getItemWrap().html());//獲取包含滾動(dòng)項的節點(diǎn)(class=scrollable)，并將所有滾動(dòng)項顯示出來(lái)
????//alert(scrollable.getPageAmount());//獲取當前滾動(dòng)欄分頁(yè)數
????//alert(scrollable.getPageIndex());//獲取當前所在分頁(yè)
????//alert(scrollable.getRoot().html());//獲取滾動(dòng)項的上一級節點(diǎn)（id=thumbs）
????//alert(scrollable.getSize());
????//alert(scrollable.getVisibleItems().length);//獲取當前可見(jiàn)滾動(dòng)項數量
????scrollable.next();//如果有下一個(gè)滾動(dòng)項，則跳轉到下一個(gè)滾動(dòng)項
????scrollable.prev(3000,function(){return true});//跳轉到前一滾動(dòng)項
????//var seekTo= scrollable.click(0).seekTo(2,1000,function(){
????????//alert(this.getIndex());
????//});
????//scrollable.move(2);
????//scrollable.prevPage();//跳轉到前一頁(yè)
????//scrollable.nextPage();//跳轉到下一頁(yè)
????//scrollable.setPage(1);//跳轉到下一頁(yè)
????//scrollable.begin();//跳轉到第一個(gè)滾動(dòng)項
????//scrollable.end();//跳轉到最后一個(gè)滾動(dòng)項
????scrollable.click(3);//使第四個(gè)滾動(dòng)項處于選中狀態(tài)
????scrollable.onBeforeSeek(function(){
????????????alert("you click the "+this.getIndex()+"st scrollable item!");
????});
????$("#remove").click(function(){
????????scrollable.getItems().filter(":last").remove();//刪除最后一個(gè)滾動(dòng)項
????????scrollable.reload().prev();//自動(dòng)更新相關(guān)配置信息，并跳轉到被刪除滾動(dòng)項的前一項
????});
以下是scrollable對象的方法說(shuō)明描述：
方法名稱(chēng) 返回值 說(shuō)明 getConf() Object 返回scrollable的配置對象，并且可通過(guò)設置該對象的相關(guān)屬性值來(lái)修改該配置對象的屬性。 getIndex() number 獲取當前滾動(dòng)項的索引號，0代表第一個(gè)元素，1代表第二個(gè)元素，以此類(lèi)推。此外，需注意的是，如果獲取到多個(gè)滾動(dòng)項，那么將會(huì )只返回第一個(gè)滾動(dòng)項的索引號。 getItems() jQuery 返回所有的滾動(dòng)項，結果以jquery對象的方式返回。 getItemWrap() jQuery 獲取滾動(dòng)項的父節點(diǎn)，結果以jquery對象的方式返回。 getPageAmount() number 獲取當前滾動(dòng)欄的分頁(yè)數。 getPageIndex() number 返回當前分頁(yè)索引號。比如說(shuō)，如果分頁(yè)設置為5個(gè)滾動(dòng)項/頁(yè)，并且當前滾動(dòng)項位置為7的話(huà)，那么將會(huì )返回1（第二頁(yè)） getRoot() jQuery 獲取滾動(dòng)項的上一級節點(diǎn)。 getSize() number 返回滾動(dòng)項的數量。該方法等同于getConf().size getVisibleItems() jQuery 獲取一個(gè)由當前可見(jiàn)滾動(dòng)項組成列表，該列表為一個(gè)jquery對象，可見(jiàn)滾動(dòng)項的數量由配置對象的size屬性定義。 reload() API scrollable支持動(dòng)態(tài)添加和刪除滾動(dòng)項的功能。在動(dòng)態(tài)添加或刪除滾動(dòng)項以后，調用此方法來(lái)自動(dòng)更新分頁(yè)導航以及滾動(dòng)項移動(dòng)的相關(guān)信息。 prev() API 跳轉到該滾動(dòng)項的前一項（如果該滾動(dòng)項不是第一個(gè)滾動(dòng)項） next() API 跳轉到該滾動(dòng)項的下一項（如果該滾動(dòng)項不是最后一個(gè)滾動(dòng)項） seekTo(index) API 跳轉到指定索引處的滾動(dòng)項。 move(offset) API 將處于當前狀態(tài)（激活）的滾動(dòng)項位置由當前滾動(dòng)項向前/后移動(dòng)offset。Offset為正，則滾動(dòng)項向右/下移動(dòng)，否則，向左/上移動(dòng)。比如:move(2),則處于當前狀態(tài)的滾動(dòng)項的索引由i滾動(dòng)項轉移至i+2滾動(dòng)項。 prevPage() API 跳轉到前一頁(yè)（如果該頁(yè)不是第一頁(yè)）。 nextPage() API 跳轉到后一頁(yè)（如果該頁(yè)不是最后一頁(yè)）。 setPage(index) API 跳轉到第index頁(yè)。比如，index=2,那么會(huì )從當前頁(yè)跳轉到第3頁(yè)。 movePage(offset) API 用于將顯示頁(yè)的位置由當前頁(yè)切換到該頁(yè)/后offset頁(yè)，該方法其他解釋類(lèi)似于(offset)。 begin() API 跳轉到第一個(gè)滾動(dòng)項，相當于seekTo(0)。 end() API 跳轉到最后一個(gè)滾動(dòng)項。 click(index) API 使第index個(gè)滾動(dòng)項處于選中（激活）狀態(tài)。 onBeforeSeek(fn) API 參見(jiàn)配置對象的onBeforeSeek相關(guān)說(shuō)明 onSeek(fn) API 參見(jiàn)配置對象的onSeek相關(guān)說(shuō)明注意：上面方法表中prev()方法以下的方法除了表中攜帶的參數外，還包含兩個(gè)隱含參數：speed和callback。其中speed參數是用于控制滾動(dòng)項的動(dòng)畫(huà)效果持續時(shí)間的，而callback為其回調方法。具體實(shí)現可參見(jiàn)scrollable的prev()方法使用示例。
最后，給出本scrollable系列的完整示例代碼：
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
";
<script src=";
<script src=";
<link rel="stylesheet" type="text/css" href=";
<style><!--
div.scrollable {
????position:relative;
????overflow:hidden;
????width: 646px;????
????height:300px;????
}
#thumbs {????
????position:absolute;
????width:20000em;????
????clear:both;
????border:1px solid #222;
}
a.prev, a.next {
????margin-top:118px;????
}
#thumbs div {
????float:left;
????width:214px;
????height:300px;
????background:#333 url(/upload/20090906120115441.png) repeat-x 0 146px;
????color:#fff;
????border-left:1px solid #333;
????cursor:pointer;
}
#thumbs div.hover {
????background-color:#444;????
}
#thumbs div.active {
????background-color:#066;
????cursor:default;
}
#thumbs h3, #thumbs p, #thumbs span {
????margin:13px;????????
????font-family:"bitstream vera sans";
????font-size:13px;
????color:#fff;????
}
#thumbs h3 em {
????font-style:normal;
????color:yellow;
}
--></style><style>div.scrollable {
????position:relative;
????overflow:hidden;
????width: 646px;????
????height:300px;????
}
#thumbs {????
????position:absolute;
????width:20000em;????
????clear:both;
????border:1px solid #222;
}
a.prev, a.next {
????margin-top:118px;????
}
#thumbs div {
????float:left;
????width:214px;
????height:300px;
????background:#333 url(/upload/20090906120115441.png) repeat-x 0 146px;
????color:#fff;
????border-left:1px solid #333;
????cursor:pointer;
}
#thumbs div.hover {
????background-color:#444;????
}
#thumbs div.active {
????background-color:#066;
????cursor:default;
}
#thumbs h3, #thumbs p, #thumbs span {
????margin:13px;????????
????font-family:"bitstream vera sans";
????font-size:13px;
????color:#fff;????
}
#thumbs h3 em {
????font-style:normal;
????color:yellow;
}</style>
<!-- navigator -->
<div class="navi"></div>
<!-- prev link -->
<a class="prev"></a>
<!-- root element for scrollable -->
<div class="scrollable">
????<div id="thumbs">
????????
????????????<div>
021yin.com/upload/20090906120116994.jpg" />
????????????????<h3><em>1. </em>An example title</h3>
????????????????<p>
????????????????????Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
????????????????????tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
????????????????</p>
????????????????<span class="blue">60 sec</span>
????????????</div>
????????????<div>
021yin.com/upload/20090906120117587.jpg" />
????????????????<h3><em>2. </em>An example title</h3>
????????????????<p>
????????????????????Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
????????????????????tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
????????????????</p>
????????????????<span class="blue">80 sec</span>
????????????</div>
????????????<div>
021yin.com/upload/20090906120117884.jpg" />
????????????????<h3><em>3. </em>An example title</h3>
????????????????<p>
????????????????????Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
????????????????????tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
????????????????</p>
????????????????<span class="blue">100 sec</span>
????????????</div>
????????????<div>
021yin.com/upload/20090906120117490.jpg" />
????????????????<h3><em>4. </em>An example title</h3>
????????????????<p>
????????????????????Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
????????????????????tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
????????????????</p>
????????????????<span class="blue">120 sec</span>
????????????</div>
????????????<div>
021yin.com/upload/20090906120118968.jpg" />
????????????????<h3><em>5. </em>An example title</h3>
????????????????<p>
????????????????????Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
????????????????????tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
????????????????</p>
????????????????<span class="blue">140 sec</span>
????????????</div>
????</div>
</div>
<!-- next link -->
<a class="next"></a>
<!-- let rest of the page float normally -->
<br clear="all" />
<div>
????<input type="button" value="remove" id="remove"/>
</div>
<script type="text/javascript"><!--
$(function() {????????
????$("div.scrollable").scrollable({
????????size: 3,
????????vertical:false,
????????//clickable:false,
????????loop:true,//設置是否自動(dòng)跳轉（根據間隔時(shí)間）
????????//interval: 1000,//設置間歇時(shí)間間隔
????????//speed:2000,
????????items: