簡潔實(shí)用的BootStrap jQuery手風(fēng)琴插件
前端
<html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>簡潔實(shí)用的jQuery手風(fēng)琴插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件庫</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/default.css"> <link rel="stylesheet" type="text/css" href="css/jquery.accordion.css"> <!--[if IE]> <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <article class="htmleaf-container"> <header class="htmleaf-header"> <h1>簡潔實(shí)用的jQuery手風(fēng)琴插件 <span>A jQuery accordion plugin</span></h1> <div class="htmleaf-links"> <a class="htmleaf-icon icon-htmleaf-home-outline" title="jQuery之家" target="_blank"><span> jQuery之家</span></a> <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" title="返回下載頁" target="_blank"><span> 返回下載頁</span></a> </div> </header> <div class="accordion"> <ul> <li class="item1 active"><a href="javascript:void();">111</a></li> <li class="item2"><a href="javascript:void();">222</a></li> <li class="item3"><a href="javascript:void();">333</a></li> <li class="item4"><a href="javascript:void();">444</a></li> <li class="item5"><a href="javascript:void();">555</a></li> </ul> </div> </article> <script src="lib/jquery-1.11.1.min.js"></script> <script src="js/jquery.accordion.js"></script> <script type="text/javascript"> $(document).ready(function () { $(".accordion").accordion(); }); </script> </body> </html>
jquery.accordion.js代碼
/* * jquery.accordion 0.0.1 * Copyright (c) 2015 lengziyu http://lengziyu.com/ * Date: 2015-10-10 */ ; (function ($) { $.fn.accordion = function (opts) { //默認(rèn)值 var defaults = { max: "620px", min: "140px", speed: "1000" } var opts = $.extend(defaults, opts); this.each(function () { var div = $(this),//$(".accordion").accordion(); 表示$(".accordion")這個(gè)元素 這里是div ul = div.children(),//這里表示ul元素 li = ul.children();//這里是li元素 //alert(div.html() + "," + ul.html() + "," + li.html()); //觸發(fā)事件 ul.find(".active a").hide();//隱藏a標(biāo)簽 //alert(ul.find(".active a").length); /* fadeOut():淡出 animate() 方法執(zhí)行 CSS 屬性集的自定義動(dòng)畫。 該方法通過CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。CSS屬性值是逐漸改變的,這樣就可以創(chuàng)建動(dòng)畫效果。 只有數(shù)字值可創(chuàng)建動(dòng)畫(比如 "margin:30px")。字符串值無法創(chuàng)建動(dòng)畫(比如 "background-color:red")。 $(selector).animate(styles,speed,easing,callback) $(selector).animate(styles,options) find() 方法獲得當(dāng)前元素集合中每個(gè)元素的所有第一級(jí)別后代 搜索所有段落中的后代 span 元素,并將其顏色設(shè)置為紅色: $("p").find("span").css('color','red'); siblings() 獲得匹配集合中每個(gè)元素的所有同胞(同一級(jí)) */ //鼠標(biāo)進(jìn)入li觸發(fā) ul.on("mouseenter", "li", function () { //$(this)表示li元素 $(this).addClass('active') .animate({ width: opts.max }, opts.speed) .find("a").fadeOut() .parent().siblings().removeClass('active') .animate({ width: opts.min }, opts.speed) .find("a").show(); }) }) } })(jQuery);
部分css樣式
*{ padding: 0; margin: 0; } ul li{ list-style: none; float: left; } .accordion{ width: 1180px; overflow: hidden; height: 375px; margin:0 auto; } .accordion ul li{ background-repeat: no-repeat; float: left; width: 140px; height: 350px; cursor: default; } .accordion ul li.active{ width: 620px; } .accordion ul .item1{ background-image: url(../img/pic1.jpg); } .accordion ul .item2{ background-image: url(../img/pic2.jpg); } .accordion ul .item3{ background-image: url(../img/pic3.jpg); } .accordion ul .item4{ background-image: url(../img/pic4.jpg); } .accordion ul .item5{ background-image: url(../img/pic5.jpg); } .accordion ul li a{ display: block; width: 140px; height: 350px; cursor: default; } .accordion ul .item1 a{ background-image: url(../img/pics1.jpg); } .accordion ul .item2 a{ background-image: url(../img/pics2.jpg); } .accordion ul .item3 a{ background-image: url(../img/pics3.jpg); } .accordion ul .item4 a{ background-image: url(../img/pics4.jpg); } .accordion ul .item5 a{ background-image: url(../img/pics5.jpg); }
以上所述是小編給大家介紹的簡潔實(shí)用的BootStrap jQuery手風(fēng)琴插件,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- Bootstrap 手風(fēng)琴菜單的實(shí)現(xiàn)代碼
- bootstrap手風(fēng)琴制作方法詳解
- Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)手風(fēng)琴菜單代碼
- 全面解析Bootstrap手風(fēng)琴效果
- bootstrap折疊調(diào)用collapse()后data-parent不生效的快速解決辦法
- Bootstrap基本插件學(xué)習(xí)筆記之折疊(22)
- Bootstrap每天必學(xué)之折疊(Collapse)插件
- Bootstrap每天必學(xué)之折疊
- Bootstrap創(chuàng)建可折疊的組件
- bootstrap手風(fēng)琴折疊示例代碼分享
相關(guān)文章
JQuery觸發(fā)radio或checkbox的change事件
在JQuery中,當(dāng)給radio或checkbox添加一個(gè)change事件時(shí),如果它的值發(fā)生變化就會(huì)觸發(fā)change事件;本文將詳細(xì)介紹如何利用JQuery觸發(fā)Checkbox的change事件需要了解的朋友可以參考下2012-12-12jquery實(shí)現(xiàn)奇偶行賦值不同css值
通常為了讓頁面呈現(xiàn)的更為美觀,我們喜歡在奇偶行加上不同的顏色2012-02-02輕松掌握jQuery中wrap()與unwrap()函數(shù)的用法
wrap()能夠?qū)⒅付℉TML元素包裹DOM結(jié)構(gòu),與之相反unwrap()函數(shù)則是將DOM去掉^^下面讓我們來以兩個(gè)小例子輕松掌握jQuery中wrap()與unwrap()函數(shù)的用法:)2016-05-05Jquery實(shí)現(xiàn)仿京東商城省市聯(lián)動(dòng)菜單
這篇文章主要介紹了Jquery實(shí)現(xiàn)仿京東商城省市聯(lián)動(dòng)菜單的簡單實(shí)例演示,可以選擇對應(yīng)省、市、縣,希望大家可以喜歡。2015-11-11addEventListener—jQuery的事件監(jiān)聽方法
在Javascript中,事件監(jiān)聽是非常重要的,通過事件監(jiān)聽,我們可以在用戶執(zhí)行某些操作時(shí)觸發(fā)相應(yīng)的處理程序。最初,Javascript監(jiān)聽事件的方式是addEvent。addEvent()比較麻煩,所以jQuery為我們提供了一個(gè)更為便捷的事件監(jiān)聽方法:addEventListener。2023-06-06js與jquery中獲取當(dāng)前鼠標(biāo)的x、y坐標(biāo)位置的代碼
jquery中獲取當(dāng)前鼠標(biāo)的x、y位置位置的代碼,需要的朋友可以參考下。2011-05-05