jQuary总结11:jQuery插件封装---jQuery封装手风琴动画插件

完整代码下载点击我的GitHub:
https://github.com/XingJYGo/jquery-accordion

1 手风琴的效果展示如下:

2 封装插件目录结构如下:

主要包括:HTML结构, CCS样式,JS文件以及jquary库.

3 插件封装步骤如下:

3-1首先,编写HTML静态结构:

<div id="box"><ul><li></li><li></li><li></li><li></li><li></li></ul>
</div>

3-2 然后设置CSS的手风琴样式

* {margin: 0;padding: 0;list-style: none;
}div {width: 1200px;height: 400px;border: 2px solid #000;margin: 100px auto;
}ul {width: 1300px;
}li {/*width: 240px;*/height: 400px;float: left;}

3-3抽取CSS样式到jquery-accordion.css,HTML文件导入CSS样式.

<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="jquery-accordion.css">
</head>

4 js中的代码书写

4-1 首先导入jquary库和手风琴插件的js文件.

<script src="jquery-1.12.4.js"></script>
<script src="jquery.accordion.js"></script>

4-2 编写手风琴插件js文件:

手风琴插件的核心需求有:

1 .动态添加颜色的需求,以及动态计算盒子的宽度

2 .找到里面所有的li,给li注册鼠标移入事件

3. 找到最外面的大盒子,给大盒子注册鼠标移出事件

4 .自定义创建颜色对象,遍历添加颜色属性.

由于要使用jquery对象调用,所以方法要加载jquery的原型上:

所有的方法都要包含于这个函数内:

$.fn.accordion = function(obj){

}

  //动态的计算每一个li的宽度// box的宽度 / 里面li的数量var width = this.innerWidth() / this.find('li').length; //计算宽度this.find('li').width(width); //给每一个li赋值宽度//处理一下用户传递进来的参数obj.maxWidth = obj.maxWidth > 1000 ? 1000 : obj.maxWidth;//计算其他盒子的宽度// (整个box的宽度- 当前li的宽度) / (this.find('li').length - 1)var minWidth = (this.innerWidth() - obj.maxWidth) / (this.find('li').length - 1);//一旦调用方法,就把颜色传递进来this.find('li').each(function(index, item)//给每一个li加背景颜色$(item).css('backgroundColor', obj.colors[index]);})

 //1.找到里面所有的li,给li注册鼠标移入事件this.find('li').on('mouseenter', function(){$(this).stop(true).animate({width:obj.maxWidth}).siblings().stop(true).animate({width: minWidth});});
//  2. 找到最外面的大盒子,给大盒子注册鼠标移出事件this.on('mouseleave', function(){$(this).find('li').stop(true).animate({width : width});});

5 最后,导入jQuery库,手风琴插件,开始创建手风琴 .

<script src="jquery-1.12.4.js"></script>
<script src="jquery.accordion.js"></script>
<script>$('#box').accordion({colors:['red','green','blue', 'yellow', 'pink'],maxWidth: 800});
</script>

转载于:https://www.cnblogs.com/autoXingJY/p/9084521.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/368605.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！