前端

<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" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>

                <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Accordion/201510122659.html" 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")这个元素 这里是div

                ul = 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);

}

引用的demo地址：

http://www.htmleaf.com/Demo/201510122660.html

bootstrap-简洁实用的jQuery手风琴插件的更多相关文章

  1. 基于Bootstrap简单实用的tags标签插件

    http://www.htmleaf.com/jQuery/ jQuery之家 自由分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件

  2. 绝对震撼 10个实用的jQuery/HTML5插件

    在HTML5的世界里,我们见证了无数的特效奇迹,但很多特效我们很难在网页中应用,今天我们要分享10款效果震撼但是又比较实用的jQuery/HTML5插件,希望这些项目在应用的过程中也能给你带来设计灵感 ...

  3. 精选29款非常实用的jQuery应用插件

    今天我们来分享一些实用的jQuery应用插件,没有特别花哨,但都比较实用,jQuery菜单.jQuery图片都有涉及到,一起来看看. 1.jQuery+CSS3仿IOS无线局域网Wifi DEMO演示 ...

  4. 分享7款非常实用的jQuery/CSS3插件演示和源码

    上次我们分享了15款效果很酷的最新jQuery/CSS3特效,非常不错,今天要分享7个非常实用的jQuery/CSS3插件演示和源码,一起来看看. 1.jQuery ajax点击地图显示商家网点分布 ...

  5. 基于Bootstrap的超酷jQuery开关按钮插件

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD

  6. 【转】基于Bootstrap的超酷jQuery开关按钮插件

    基于Bootstrap的超酷jQuery开关按钮插件

  7. 5款实用的jQuery验证码插件

    效果图 文档结构 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  8. 基于Bootstrap的炫酷jQuery slider插件

    简要教程 这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件.该slider插件可以自定义slider的颜色.形状.透明度和tooltip等属性,美 ...

  9. 强大实用的jQuery幻灯片插件Owl Carousel

    演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及 ...

随机推荐

  1. Python黑帽编程 4.1 Sniffer(嗅探器)之数据捕获（上）

    Python黑帽编程 4.1 Sniffer(嗅探器)之数据捕获(上) 网络嗅探,是监听流经本机网卡数据包的一种技术,嗅探器就是利用这种技术进行数据捕获和分析的软件. 编写嗅探器,捕获数据是前置功能, ...

  2. Net作业调度(一) -Quartz.Net入门

    背景 很多时候,项目需要在不同时刻,执行一个或很多个不同的作业. Windows执行计划这时并不能很好的满足需求了,迫切需要一个更为强大,方便管理,集群部署的作业调度框架. 介绍 Quartz一个开源 ...

  3. JavaScript学习笔记之Object

    对象(object)是JavaScript的核心概念,也是最重要的数据类型.JavaScript的所有数据都可以被视为对象. 简单说,所谓对象,就是一种无序的数据集合,由若干个“键值对”(key-va ...

  4. css浮雕效果

    浮雕效果 今天看百度地图看到了一个效果 感觉这个效果用在网页上应该蛮赞的,于是就学习了一下 浮雕效果需要用到伸缩盒的知识(flex) flex在chrome是完全支持的,要加-webkit-前缀,其他 ...

  5. vSphere Client 编辑虚拟机属性的问题

    编辑虚拟机属性的时候, 出现: vpxclient.vmconfig.cpuid 初始值设置异常之类的,重置了, 并将注册表中的所有vmvare 相关键值删除了, 还是一样的.. 后面参照https: ...

  6. Spring中AOP（通知）的使用

    1.新建 Spring Bean Configuration File  xml格式的文件 2. xml文件 <bean id="my1" class="xml.M ...

  7. MongoDB 安装和可视化工具

    MongoDB 是一款非常热门的NoSQL,面向文档的数据库管理系统,官方下载地址是:MongoDB,博主选择的是 Enterprise Server (MongoDB 3.2.9)版本,安装在Win ...

  8. 解密jQuery事件核心 - 委托设计（二）

    第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...

  9. 准备 KVM 实验环境 - 每天5分钟玩转 OpenStack（3）

    KVM 是 OpenStack 使用最广泛的 Hypervisor,本节介绍如何搭建 KVM 实验环境 安装 KVM 上一节说了,KVM 是 2 型虚拟化,是运行在操作系统之上的,所以我们先要装一个 ...

  10. ASP.NET：注销功能实现

    原理:清空Session 1.Web窗体:index.aspx <a href="logoutHandler.ashx">注销</a> 2.一般处理程序:L ...