前端

<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. HTML5- Canvas入门（二）

    上篇文章我们了解了canvas的定义.获取和基础的绘图操作,其中的绘图功能我们讲解了线段绘制.上色.描边等方面知识点. 今天我们来讲讲矩形(Rectangle)和多边形的绘制. 矩形的绘制一共有两个口 ...

  2. Python黑帽编程2.8 套接字编程

    Python黑帽编程2.8 套接字编程 套接字编程在本系列教程中地位并不是很突出,但是我们观察网络应用,绝大多数都是基于Socket来做的,哪怕是绝大多数的木马程序也是如此.官方关于socket编程的 ...

  3. AnguarJS 第二天----数据绑定

    Terms 今天学习AngularJS双向数据绑定的特性,这里面需要提到两个概念: 数据模型:数据模型是指 $scope对象, $scope对象是简单的javascript对象,视图可以访问其中的属性 ...

  4. 策划编写一个新的Helper类

    https://code.csdn.net/jy02305022/blqw-data 有朋友看见的话给点意见呗

  5. Objective-C 原型模式 -- 简单介绍和使用

    用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. Prototype原型模式是一种创建型设计模式,Prototype模式允许一个对象再创建另外一个可定制的对象,根本无需知道任何如何创建 ...

  6. MongoDB 文档的查询和插入操作

    MongoDB是文档型数据库,有一些专门的术语,和关系型DB相似,但也有差异,例如,Collection类似于关系型DB的Table,document类似于row,key/value pair类似于c ...

  7. Sql Server系列：数据库对象

    数据库对象是数据库的组成部分,数据表.视图.索引.存储过程以及触发器等都是数据库对象. 数据库的主要对象是数据表,数据表是一系列二维数组的集合,用于存储各种信息. 视图表面上看与表几乎一样,具有一组命 ...

  8. Minor【 PHP框架】2.第一个应用与请求的生命周期

    框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...

  9. Vue.js学习笔记（4）

    分享一段将 json数组数据以  csv格式导出的代码: html: <button class="btn btn-danger" @click='exportData'&g ...

  10. lintcode循环数组之连续子数组求和

    v 题目:连续子数组求和 II 给定一个整数循环数组(头尾相接),请找出一个连续的子数组,使得该子数组的和最大.输出答案时,请分别返回第一个数字和最后一个数字的值.如果多个答案,请返回其中任意一个. ...