前端

<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. .NET中的DES对称加密

    DES是一种对称加密(Data Encryption Standard)算法,于1977年得到美国政府的正式许可,是一种用56位密钥来加密64位数据的方法.一般密码长度为8个字节,其中56位加密密钥, ...

  2. 论如何在手机端web前端实现自定义原生控件的样式

    手机开发webapp的同学一定遇到过这样问题,如何为丑极了的手机元素应用自定义的样式.首先,要弄清楚为什么要定义手机原生控件的样式,就需要看看手机的那些原生框样式的丑陋摸样: android: ios ...

  3. ASP.NET MVC项目实践技巧

    原创文章转载请注明出处:@协思, http://zeeman.cnblogs.com 在.NET开发初期,微软提供的WEB开发模型是WebForm,试图消除Web和桌面的隔阂,建立一致的开发体验.但是 ...

  4. [ASP.NET MVC 小牛之路]05 - 使用 Ninject

    在[ASP.NET MVC 小牛之路]系列上一篇文章(依赖注入(DI)和Ninject)的末尾提到了在ASP.NET MVC中使用Ninject要做的两件事情,续这篇文章之后,本文将用一个实际的示例来 ...

  5. 【NodeJS 学习笔记04】新闻发布系统

    前言 昨天,我们跟着这位大哥的博客(https://github.com/nswbmw/N-blog/wiki/_pages)进行了nodeJS初步的学习,最后也能将数据插入数据库了 但是一味的跟着别 ...

  6. 2017预防bug的重要性

    Bug,中文名缺陷.一个让软件测试员兴奋,让开发人员头疼的词.来源二次大战期间,一个称为"马克二型"的计算机,由于天气过热,硬件跟不上导致死机.最后发现是因为飞蛾,被继电器电死,将 ...

  7. Maven Plugins常用配置

    官方文档:http://maven.apache.org/plugins/index.html# 这里主要介绍compiler插件的配置.http://maven.apache.org/plugins ...

  8. Script component 用法

    在SSIS中,可以使用C#编写脚本,这是十分激动人心的事,能够使用C#代码,使得Script Component无所不能. 第一部分:组件简介Script Component 有三种类型:Source ...

  9. OpenCASCADE6.8.0 Reference Manual Serach Problem

    OpenCASCADE6.8.0 Reference Manual Serach Problem eryar@163.com 1. Problem 有网友反映OpenCASCADE6.8.0的Refe ...

  10. 小白学习MVC5+EF6遇到的问题一

    这两天有空的时候会看看Miro大神的MVC5+EF6系列文章,推荐大家看看. 以前没有接触过,纯小白一个,今天在学习的过程中遇到了一个问题,习惯了WebForm,在运行页面之前都会右键设置为起始页,我 ...