簡潔實用的BootStrap jQuery手風琴插件

2019-11-20 09:07:11

字體：大中小

來源：轉載

供稿：網友

前端

<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>簡潔實用的jQuery手風琴插件|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>簡潔實用的jQuery手風琴插件 <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) {//默認值var defaults = {max: "620px",min: "140px",speed: "1000"}var opts = $.extend(defaults, opts);this.each(function () {var div = $(this),//$(".accordion").accordion(); 表示$(".accordion")這個元素 這里是divul = div.children(),//這里表示ul元素li = ul.children();//這里是li元素//alert(div.html() + "," + ul.html() + "," + li.html());//觸發事件ul.find(".active a").hide();//隱藏a標簽//alert(ul.find(".active a").length);/*fadeOut()：淡出animate() 方法執行 CSS 屬性集的自定義動畫。該方法通過CSS樣式將元素從一個狀態改變為另一個狀態。CSS屬性值是逐漸改變的，這樣就可以創建動畫效果。只有數字值可創建動畫（比如 "margin:30px"）。字符串值無法創建動畫（比如 "background-color:red"）。$(selector).animate(styles,speed,easing,callback) $(selector).animate(styles,options)find() 方法獲得當前元素集合中每個元素的所有第一級別后代搜索所有段落中的后代 span 元素，并將其顏色設置為紅色：$("p").find("span").css('color','red');siblings() 獲得匹配集合中每個元素的所有同胞（同一級）*///鼠標進入li觸發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);}