jQuery控制li上下循環(huán)滾動(dòng)插件用法實(shí)例(附demo源碼下載)
本文實(shí)例講述了jQuery控制li上下循環(huán)滾動(dòng)插件用法。分享給大家供大家參考,具體如下:
/** * * jQuery scrollQ plugin li上下滾動(dòng)插件 * @name jquery-scrollQ.js * @author Q * @date 2012-03-23 * line 顯示li行數(shù) * scrollNum 每次滾動(dòng)li行數(shù) * scrollTime 滾動(dòng)速度 單位毫秒 * */ (function($){ var status = false; $.fn.scrollQ = function(options){ var defaults = { line:4, scrollNum:2, scrollTime:1000 } var options=jQuery.extend(defaults,options); var _self = this; return this.each(function(){ $("li",this).each(function(){ $(this).css("display","none"); }) $("li:lt("+options.line+")",this).each(function(){ $(this).css("display","block"); }) function scroll() { for(i=0;i<options.scrollNum;i++) { var start=$("li:first",_self); start.fadeOut(100); start.css("display","none"); start.appendTo(_self); $("li:eq("+(options.line-1)+")",_self).each(function(){ $(this).fadeIn(500); $(this).css("display","block"); }) } } var timer; timer = setInterval(scroll,options.scrollTime); _self.bind("mouseover",function(){ clearInterval(timer); }); _self.bind("mouseout",function(){ timer = setInterval(scroll,options.scrollTime); }); }); } })(jQuery);
調(diào)用方式如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>test</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="scrollQ.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#sItem").scrollQ(); }); </script> </head> <body> <div> <ul id="sItem"> <li>標(biāo)題1</li> <li>標(biāo)題2</li> <li>標(biāo)題3</li> <li>標(biāo)題4</li> <li>標(biāo)題5</li> <li>標(biāo)題6</li> <li>標(biāo)題7</li> <li>標(biāo)題8</li> <li>標(biāo)題9</li> <li>標(biāo)題10</li> </ul> </div> </body> </html>
完整實(shí)例代碼點(diǎn)擊此處本站下載。
PS:這里再為大家推薦幾款代碼格式化、美化工具,相信大家在以后的開(kāi)發(fā)過(guò)程中會(huì)用得到:
在線JavaScript代碼美化、格式化工具:
http://tools.jb51.net/code/js
JavaScript壓縮/格式化/加密工具:
http://tools.jb51.net/code/jscompress
PHP代碼在線格式化美化工具:
http://tools.jb51.net/code/phpformat
XML代碼在線格式化美化工具:
http://tools.jb51.net/code/xmlcodeformat
json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具:
http://tools.jb51.net/code/jsoncodeformat
在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具:
http://tools.jb51.net/code/json
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- Jquery實(shí)現(xiàn)無(wú)縫向上循環(huán)滾動(dòng)列表的特效
- jQuery實(shí)現(xiàn)列表自動(dòng)滾動(dòng)循環(huán)滾動(dòng)展示新聞
- jQuery循環(huán)滾動(dòng)新聞列表示例代碼
- jQuery實(shí)現(xiàn)列表自動(dòng)循環(huán)滾動(dòng)鼠標(biāo)懸停時(shí)停止?jié)L動(dòng)
- 使用jquery實(shí)現(xiàn)的循環(huán)連續(xù)可停頓滾動(dòng)實(shí)例
- 多種JQuery循環(huán)滾動(dòng)文字圖片效果代碼
- 基于jQuery實(shí)現(xiàn)列表循環(huán)滾動(dòng)小技巧(超簡(jiǎn)單)
相關(guān)文章
jQuery綁定事件-多種實(shí)現(xiàn)方式總結(jié)
下面小編就為大家?guī)?lái)一篇jQuery綁定事件-多種實(shí)現(xiàn)方式總結(jié)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-05-05JQuery實(shí)現(xiàn)當(dāng)鼠標(biāo)停留在某區(qū)域3秒后自動(dòng)執(zhí)行
這篇文章主要介紹了JQuery實(shí)現(xiàn)當(dāng)鼠標(biāo)停留在某區(qū)域3秒后自動(dòng)執(zhí)行,可以應(yīng)用于很多場(chǎng)景,需要的朋友可以參考下2014-09-09學(xué)習(xí)使用jquery iScroll.js移動(dòng)端滾動(dòng)條插件
這篇文章主要為大家詳細(xì)介紹了jquery iScroll.js移動(dòng)端滾動(dòng)條插件的使用方法,以及iScroll.js使用注意事項(xiàng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02Validform驗(yàn)證時(shí)可以為空否則按照指定格式驗(yàn)證
這篇文章主要介紹了Validform驗(yàn)證時(shí)可以為空否則按照指定格式驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2017-10-10jQuery插件HighCharts繪制簡(jiǎn)單2D柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts繪制簡(jiǎn)單2D柱狀圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用HighCharts插件繪制2D柱狀圖的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03基于Jquery插件實(shí)現(xiàn)跨域異步上傳文件功能
這篇文章主要介紹了基于Jquery插件實(shí)現(xiàn)跨域異步上傳文件功能的相關(guān)資料,需要的朋友可以參考下2016-04-04jquery ajax后臺(tái)返回list,前臺(tái)用jquery遍歷list的實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇jquery ajax后臺(tái)返回list,前臺(tái)用jquery遍歷list的實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10