前端

<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. Redis高可用分布式内部交流(九)

    这是上月在公司内部的一次分享,现把PPT及交流内容整理成博客. 阅读目录: 高可用 数据同步 分布式 分布式集群时代 总结 高可用 高可用(High Availability),是当一台服务器停止服务 ...

  2. Mysql 主从延时监控

    200 ? "200px" : this.width)!important;} --> 介绍 主从延时在主从环境中是一个非常值得关注的问题,有时候我们可以通过show sla ...

  3. 关于分工的思考 (Thoughts on Division of Labor)

    Did you ever have the feeling that adding people doesn't help in software development? Did you ever ...

  4. vmware 安装xp 流水账

    1. 分区 PQ分区.1个区,C盘,NTFS. 2. 安装XP 进入ghost,不要选择一键. 然后fromImage, d:\xxx\GHO

  5. 模糊测试（fuzz testing）介绍（一）

    模糊测试(fuzz testing)是一类安全性测试的方法.说起安全性测试,大部分人头脑中浮现出的可能是一个标准的“黑客”场景:某个不修边幅.脸色苍白的年轻人,坐在黑暗的房间中,正在熟练地使用各种工具 ...

  6. 在SqlServer2008R2中，在一张表上加上insert、update、delete触发器（带游标）

    在日常工作中,在SqlServer2008R2中,需要向一张表上加上触发器,监控插入.更新.删除. --一个触发器内三种INSERT,UPDATE,DELETE状态 IF exists(select ...

  7. AngularJs之二

    今天先讲一个angularJs的表单绑定实例: <div ng-app="myApp" ng-controller="formCtrl"> < ...

  8. Pyhton 利用threading远程下发文件和远程执行linux系统命令

    #!/usr/bin/env python # encoding: utf-8 #__author__ = 'cp' #__date__ = '21/07/16 上午 10:32' import th ...

  9. Powershell 切换IE代理

    买了一个穿越防火墙的代理,在 Windows 下每次手动设置代理都好麻烦,最后不断尝试 Powershell 来设置,最后也终于成功了.   其实利用 Powershell 来设置 IE 的代理,就是 ...

  10. python进程池：multiprocessing.pool

    本文转至http://www.cnblogs.com/kaituorensheng/p/4465768.html,在其基础上进行了一些小小改动. 在利用Python进行系统管理的时候,特别是同时操作多 ...