Jquery学习插件之手风琴
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴</title>
<link href="css/accordion.css" rel="stylesheet">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/accordion.js"></script>
<script>
$(function(){
//插件的应用
$("#ul1").accordion();
});
</script>
</head>
<body>
<ul id="ul1">
<li>111111111<span>第一块</span></li>
<li>22222222222<span>第二块</span></li>
<li>33333333333<span>第三块</span></li>
<li>444444444<span>第四块</span></li>
<li>555555555<span>第五块</span></li>
</ul>
</body>
</html>
js部分
/**
* Created by Iecy on 14-9-5.
* 手风琴插件
*/
;(function($){
$.fn.extend({
accordion:function(options){
var defaults = {
width:"800px",
spanWidth:20,
hideWidth:700
};
var options = $.extend(defaults,options);
var obj = $(this); //当前对象
var obj_children = obj.children();//当前对象下的子级(第一级)
var obj_childern_len = obj_children.length;//子级的个数
var aLeft = [];
obj_children.each(function(){
var index = $(this).index();
$(this).css({zIndex:obj_childern_len-index,left:options.spanWidth*index+"px"});//初始化各个li层级和位置
aLeft[index] = $(this).position().left;//保存下各个手风琴键的位置
}); obj_children.mouseover(function(){
var index = $(this).index();
obj_children.each(function(){
if($(this).index()<index){
obj_children.eq($(this).index()).stop().animate({left:aLeft[$(this).index()]-options.hideWidth+"px"});
}else{
obj_children.eq($(this).index()).stop().animate({left:aLeft[$(this).index()]+'px'});
}
});
});
}
});
})(jQuery);
css部分
* {margin:; padding:; list-style:none;}
/*展开:720px 收起:20px*/
#ul1 {width:800px; height:400px; border:1px solid red; margin:10px auto; position:relative; overflow:hidden;}
#ul1 li {width:720px; height:400px; background:#CCC; position:absolute;}
#ul1 li span {position:absolute; top:; right:; background:#C66; width:18px; height:398px; border:1px solid black; color:white; text-align:center;}
个人练习,路过下就可以了。
Jquery学习插件之手风琴的更多相关文章
- Jquery 学习插件第一天
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- jQuery学习之路(8)- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- 深入学习jQuery自定义插件
原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数); $(‘#id’).myPlugin(o ...
- jQuery学习之:Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- JQuery zoom插件学习
jquery zoom是一款图片放大插件,经常用在商城商品页面里. 使用JQuery zoom插件,除了需要引入JQuery.js外,还要引入JQuery.zoom.js文件及jqzoom.css文件 ...
- jQuery学习笔记(jquery.form插件)
官网: http://malsup.com/jquery/form/ jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Fo ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery学习之路(1)-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
随机推荐
- Ubuntu16.04安装Atom
转自:http://blog.csdn.net/q1302182594/article/details/51304401 sudo add-apt-repository ppa:webupd8team ...
- js方法入参或局部变量和全局变量重名,用来赋值全局变量会失败
今天遇到个bug,最后终于知道原因了,js方法入参和全局变量重名,用入参赋值全局变量失败,就是说方法入参不能和全局变量重名. 现在下面的例子也说明,局部变量和全局变量不可以同名不光是入参,只要同名赋值 ...
- JS学习进阶中 come on!
1,定义新的属性来扩展对象 新方法:defineProperty() 实例: var data = {}: Object.defineProperty(data,"type",{ ...
- 51nod1102(数塔)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1002 题意:中文题诶- 思路:简单dp 从底层往上递推,每个 ...
- kettle系列-[KettleUtil]kettle插件,类似kettle的自定义java类控件
该kettle插件功能类似kettle现有的定义java类插件,自定java类插件主要是支持在kettle中直接编写java代码实现自定特殊功能,而本控件主要是将自定义代码转移到jar包,就是说自定义 ...
- SecureCRT如何与Linux虚拟机进行关联
首先在宿主机上确认虚拟网卡是否正确工作,并查看其IP地址,如本例中,宿主机的虚拟网卡VMnet8的IP地址为:192.168.121.1/24. VMnet8是VMware用于NAT连接的虚拟网卡. ...
- gulp如何使用
简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...
- JS中,!=, !== 和 !的区别和使用场景
var num = 1; var str = '1'; var test = 1; test == num //true 相同类型 相同值 test === num //true 相同类型 ...
- ****Linux MySQL命令运用个人总结
1.xampp在linux下如何使用mysql命令 A: 解决方法(推荐第二个方法): 1.xampp中的命令工具在/opt/lampp/bin/目录中,所以可以这样运行mysql命令 /opt/la ...
- AgileEAS.NET SOA 中间件Web运行容器管理功能已全部开源,欢迎大家下载、使用、反馈
一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...