简洁实用的BootStrap jQuery手风琴插件


Posted in Javascript onAugust 31, 2016

前端

<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);
}

简洁实用的BootStrap jQuery手风琴插件

以上所述是小编给大家介绍的简洁实用的BootStrap jQuery手风琴插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
有道JavaScript监听浏览器的问题
Jun 23 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 Javascript
浅析JavaScript中的变量提升
Jun 01 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 #Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 #Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 #Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 #Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 #Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 #Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 #Javascript
You might like
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
php中cookie的使用方法
2014/03/29 PHP
Destoon实现多表查询示例
2014/08/21 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
AngularJS基础知识
2014/12/21 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
Python reduce()函数的用法小结
2017/11/15 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
对python中的logger模块全面讲解
2018/04/28 Python
django用户登录和注销的实现方法
2018/07/16 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
Python转换时间的图文方法
2019/07/01 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
中国高端家电购物商城:顺电
2018/03/04 全球购物
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
悬空寺导游词
2015/02/05 职场文书
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL