jQuery控制li上下循環(huán)滾動插件用法實例(附demo源碼下載)
本文實例講述了jQuery控制li上下循環(huán)滾動插件用法。分享給大家供大家參考,具體如下:
/** * * jQuery scrollQ plugin li上下滾動插件 * @name jquery-scrollQ.js * @author Q * @date 2012-03-23 * line 顯示li行數(shù) * scrollNum 每次滾動li行數(shù) * scrollTime 滾動速度 單位毫秒 * */ (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>標題1</li> <li>標題2</li> <li>標題3</li> <li>標題4</li> <li>標題5</li> <li>標題6</li> <li>標題7</li> <li>標題8</li> <li>標題9</li> <li>標題10</li> </ul> </div> </body> </html>
完整實例代碼點擊此處本站下載。
PS:這里再為大家推薦幾款代碼格式化、美化工具,相信大家在以后的開發(fā)過程中會用得到:
在線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代碼檢驗、檢驗、美化、格式化工具:
http://tools.jb51.net/code/json
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery綁定事件-多種實現(xiàn)方式總結(jié)
下面小編就為大家?guī)硪黄猨Query綁定事件-多種實現(xiàn)方式總結(jié)。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-05-05JQuery實現(xiàn)當鼠標停留在某區(qū)域3秒后自動執(zhí)行
這篇文章主要介紹了JQuery實現(xiàn)當鼠標停留在某區(qū)域3秒后自動執(zhí)行,可以應(yīng)用于很多場景,需要的朋友可以參考下2014-09-09學(xué)習(xí)使用jquery iScroll.js移動端滾動條插件
這篇文章主要為大家詳細介紹了jquery iScroll.js移動端滾動條插件的使用方法,以及iScroll.js使用注意事項,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-02-02jQuery插件HighCharts繪制簡單2D柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts繪制簡單2D柱狀圖效果,結(jié)合完整實例形式分析了jQuery使用HighCharts插件繪制2D柱狀圖的實現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jquery ajax后臺返回list,前臺用jquery遍歷list的實現(xiàn)
下面小編就為大家?guī)硪黄猨query ajax后臺返回list,前臺用jquery遍歷list的實現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10