jQuery實現(xiàn)的多滑動門,多選項卡效果代碼
本文實例講述了jQuery實現(xiàn)的多滑動門,多選項卡效果。分享給大家供大家參考,具體如下:
運行效果截圖如下:
具體代碼如下:
<!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> <script language="javascript" src="jquery-1.4.2.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>超多滑動門效果</title> <style type="text/css"> * { margin:0; padding:0; } body { font-size:12px; } ul, li { list-style-type:none; } #tab { width:500px; height:200px; margin:20px auto; overflow:hidden; } #tab .tab_title { width:500px; height:22px; overflow:hidden; left:0; top:0; clear:both; overflow:hidden; position:relative; } #tab .tab_title .u { width:465px; overflow:hidden; position:relative; } #tab .tab_title ul { margin:0 5px; position:absolute; float:left; width:2784px;/*這個即是滑動門的總長度!就是所有的li的寬度加上間距!計算本案例中的寬度即為:24*100+14*24+24*2(2為邊框?qū)挾龋?2784 */ } #tab .tab_title div { float:left; width:15px; height:20px; line-height:20px; cursor:pointer; } #tab .tab_title span.vright { top:0; right:5px; margin-left:2px; } #tab .tab_title span.vleft { top:0; left:0px; padding-left:5px; } #tab .tab_title li { float:left; width:100px;/*這個的寬度即是四個滑動門欄目的寬度*/ height:20px; line-height:20px; text-align:center; background-color:#cccccc; margin-right:14px; border:1px #999999 solid; cursor:pointer; } #tab .tab_title li:hover { background-color:#999999 } #tab .tab_title li.selected { background-color:#666666; } #tab .tab_content { width:476px; height:156px; overflow:hidden; padding:10px; border:1px #CCCCCC solid; } #tab .tab_content div { border:1px #999999 dotted; } #tab .tab_content div p { line-height:1.5; text-indent:25px; color:#333333; } #tab .tab_content .none { display:none; } #div1 { border:1px #CCCCCC solid; position:absolute; display:none; background:#EEF7EE; font-size:12px; padding:5px; color:#999999; } #div2 { width:120px; height:15px; border:1px #CCCCCC solid; position:absolute; display:none; background:#CCCCCC; font-size:5px; padding:2px; color:#999999; } </style> <script language="javascript"> $(function(){ var index = 0; $(".tab_title ul li").click(function(){ index = $(".tab_title ul li").index(this); $(this).addClass("selected").siblings().removeClass("selected"); $(".tab_content div").eq(index).show().siblings().hide(); }); var i = 4; //這個前端展示幾個滑動門欄目 var len = $(".u .scrol li").length; var page = 1; var maxpage = Math.ceil(len/i); var scrollWidth = $(".u").width(); var divbox = "<div id='div1' >呵呵,沒有了</div>"; $("body").append(divbox); $(".vright").click(function(e){ if(!$(".u .scrol").is(":animated")){ if(page == maxpage ){ $(".u .scrol").stop(); $("#div1").css({ "top": (e.pageY + 20) +"px", "left": (e.pageX + 20) +"px", "opacity": "0.9" }).stop(true,false).fadeIn(800).fadeOut(800); }else{ $(".u .scrol").animate({left : "-=" + scrollWidth +"px"},2000); page++; } } }); $(".vleft").click(function(){ if(!$(".u .scrol").is(":animated")){ if(page == 1){ $(".u .scrol").stop(); }else{ $(".u .scrol").animate({left : "+=" + scrollWidth +"px"},2000); page--; } } }); }); </script> </head> <body> <div id="tab"> <div class="tab_title"> <div class="vleft"><strong><<</strong></div> <div class="u"> <ul class="scrol"> <li class="selected">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> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>21</li> <li>22</li> <li>23</li> <li>24</li> </ul> </div> <div class="vright"><strong>>></strong></div> </div> <div class="tab_content"> <div> <p>1的內(nèi)容</p> </div> <div class="none"> <p>2的內(nèi)容</p> </div> <div class="none"> <p>3的內(nèi)容</p> </div> <div class="none"> <p>4的內(nèi)容</p> </div> <div class="none"> <p>5的內(nèi)容</p> </div> <div class="none"> <p>6的內(nèi)容</p> </div> <div class="none"> <p>7的內(nèi)容</p> </div> <div class="none"> <p>8的內(nèi)容</p> </div> <div class="none"> <p>9的內(nèi)容</p> </div> <div class="none"> <p>10的內(nèi)容</p> </div> <div class="none"> <p>10的內(nèi)容</p> </div> <div class="none"> <p>12的內(nèi)容</p> </div> <div class="none"> <p>13的內(nèi)容</p> </div> <div class="none"> <p>14的內(nèi)容</p> </div> <div class="none"> <p>15的內(nèi)容</p> </div> <div class="none"> <p>16的內(nèi)容</p> </div> <div class="none"> <p>17的內(nèi)容</p> </div> <div class="none"> <p>18的內(nèi)容</p> </div> <div class="none"> <p>19的內(nèi)容</p> </div> <div class="none"> <p>20的內(nèi)容</p> </div> <div class="none"> <p>21的內(nèi)容</p> </div> <div class="none"> <p>22的內(nèi)容</p> </div> <div class="none"> <p>23的內(nèi)容</p> </div> <div class="none"> <p>24的內(nèi)容</p> </div> </div> </div> </body> </html>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- jQuery實現(xiàn)類似滑動門切換效果的層切換
- jQuery實現(xiàn)的經(jīng)典滑動門效果
- 基于jquery自己寫tab滑動門(通用版)
- jQuery實現(xiàn)自動切換播放的經(jīng)典滑動門效果
- jquery實現(xiàn)標題字體變換的滑動門菜單效果
- 使用jquery實現(xiàn)div的tab切換實例代碼
- jQuery簡單tab切換效果實現(xiàn)方法
- jquery實現(xiàn)簡單Tab切換菜單效果
- jQuery簡單幾行代碼實現(xiàn)tab切換
- jQuery+css實現(xiàn)的tab切換標簽(兼容各瀏覽器)
- Jquery滑動門/tab切換實現(xiàn)方法完整示例
相關(guān)文章
jQueryUI Datepicker組件設(shè)置日期高亮
這篇文章主要介紹了jQueryUI Datepicker組件設(shè)置日期高亮的相關(guān)方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10jquery簡單實現(xiàn)滾動條下拉DIV固定在頭部不動
滾動條下拉DIV固定在頭部不動效果,想必很多的朋友都有見到過吧,下面為大家詳細介紹下使用jquery是如何實現(xiàn)的,感興趣的朋友可以參考下2013-11-11