简洁实用的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 Timer实现代码
Feb 17 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
如何利用js在两个html窗口间通信
Apr 27 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小技巧之过滤ascii控制字符
2014/05/14 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
php计算年龄精准到年月日
2015/11/17 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
Javascript的一种模块模式
2008/03/22 Javascript
一些技巧性实用js代码小结
2009/10/14 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
Python数据类型详解(一)字符串
2016/05/08 Python
Python模块包中__init__.py文件功能分析
2016/06/14 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
python 字段拆分详解
2019/12/17 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
电子商务毕业生求职信
2013/11/10 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏