前端

<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. RazorEngine 3.3 在Mono 3.2上正常运行

    RazorEngine 是一个简化的模板引擎基于微软新的Razor 解析引擎, Razor是在 ASP.NET MVC3 和 Web Pages中引入的.RazorEngine 提供了一个外包装和额外 ...

  2. 元素的click与dblclick

    JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,是用户或浏览器自身执行的某种动作.诸如click.load.mousemover,都是事 ...

  3. <canvas>设置宽高遇到的问题

    在使用<canvas>元素时必须设置宽度和高度,指定可以绘画的区域大小.但是这里设置宽度和高度的时候有一个小问题. 样例代码: <!DOCTYPE html> <html ...

  4. 模拟淘宝购物，运用cookie，记录登录账号信息，并且记住购物车内所选的商品

    1.登录界面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...

  5. Html 特殊符号

    HTML特殊符号对照表 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 Α Α Α Β Β Β Γ Γ Γ Δ Δ Δ Ε Ε Ε Ζ Ζ Ζ Η Η Η Θ Θ Θ Ι Ι Ι Κ ...

  6. sizzle分析记录：属性选择器

    源码部分 通过Sizzle.attr匹配出值 然后通过表达式刷选计算 "ATTR": function( name, operator, check ) { return func ...

  7. eclipse build workspace太慢或者 js出错问题解决

    1.js文件错误解决办法 右键项目->properties->Builders(注:JavaScript Validator也会引起 build workspace太慢) 2.Eclips ...

  8. IOS数据存储之NSUserDefaults

    前言: 作为从事Android开发人来说一定听说过SharedPreferences,然后要成为一名ios开发工程师来说咋能不知道NSUserDefaults!接下来让我们认识一下. NSUserDe ...

  9. 关于Docker目录挂载的总结

    Docker容器启动的时候,如果要挂载宿主机的一个目录,可以用-v参数指定. 譬如我要启动一个centos容器,宿主机的/test目录挂载到容器的/soft目录,可通过以下方式指定: # docker ...

  10. css:图标与文字对齐的两种方法

    (好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...