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

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

neatdm路径_trapcode tao插件下载-AE三维物体路径动画插件(Trapcode TAO) 2.1.2 官方最新版 - 河东下载站...
Trapcode TAO是一款功能强大的AE三维物体路径动画插件,该软件集合了Trapcode 3D Stroke和Mir几乎所有的精华功能,为用户提供了一个强大的多功能视频处理插件,该软件能够实现l ...
探讨3DSMAX 中的CS骨骼动画插件
3D 图形引擎中角色动画是一个重要的组成部分,它在虚拟现实.电子游戏,甚至是传统的动画制作中均扮演着极其重要的角色.如何实现一个良好的角色动画以引起越来越多的研究者的关注.目前的许多建模软件都可以快速 ...
Ajax请求Session超时的解决办法：拦截器 + 封装jquery的post方法
目标:前端系统,后端系统等,统一处理Session超时和系统错误的问题. 可能需要处理的问题:Session超时.系统500错误.普通的业务错误.权限不足. 同步请求: Session超时,登录拦截器 ...
jQuery轮播的封装
今天来聊聊jQuery轮播的封装! 我自己封装了一个图片宽1200px,高400px的无缝滚动轮播图:话不多说看看代码吧! Js: /*** Created by Administrator on 2 ...
ajax.then()用法,使用es6的then()方法封装jquery的ajax请求
使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...
vue封装jquery修改自身以及兄弟元素的方法
在项目中我们经常有,点击某一个元素让其自身样式发生变化,同时其兄弟元素改变的需求,最简单的就是通过Jquery来操作,但是如果需求多的话,那么我们就可以对这个方法进行封装,然后再引入使用.今天我们就来 ...
11月14日:jquery
学习并使用jquery 一:jquery概述 jq就是Javascript的的仓库仓库:可以把很多东西放到这个仓库里,使用的时候在仓库中找就行. JavaScript库:即library,是一个封装 ...
案例——封装一个轮播图插件
说起插件,可能很多人搞不清楚插件和类库.组件.框架的区别,在这里,我先来简单的聊一聊它们之间的区别和联系类库提供一些真实项目中常用的方法,任何项目都可以把类库导入进来,调取里面的方法实现自己需要的 ...
html5 酒店入住插件,jQuery酒店类入住日期时间范围选择器插件
t-datepicker是一款jQuery酒店类入住日期时间范围选择器插件.该jquery日期选择器提供多个配置参数和方法,可以创建响应式的.灵活的.多种主题效果的日期范围选择器.它的特点还有: 内置 ...

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

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

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

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

3 插件封装步骤如下:

4 js中的代码书写

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

最新文章

热门文章

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

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

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

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

3 插件封装步骤如下:

4 js中的代码书写

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

最新文章

热门文章

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

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

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