jquery简易手风琴插件的封装


Posted in jQuery onOctober 13, 2020

本文实例为大家分享了jquery简易手风琴插件的封装代码,供大家参考,具体内容如下

理论基础:

基于jquery封装插件,首先我们要清楚封装的代码应该写在哪里?
毫无疑问,写在原型中...
写入原型的好处:
数据共享,节省空间
那么既然知道是写在原型中,那怎么将封装的代码写入原型呢?
首先在jq文件中找到如下代码?
jQuery.fn = jQuery.prototype = {...}
jQuery.fn等于jq对象的原型,而在jq中,jQuery可简写为$
所以我们可以直接在$.fn中编写封装的代码

/*手风琴插件封装*/
$.fn.accordion=function (ele,width) {
 //随机颜色值
 var setBgc=function (eleObj) {
 var r,g,b;
 r=Math.floor(Math.random()*256);
 g=Math.floor(Math.random()*256);
 b=Math.floor(Math.random()*256);
 $(eleObj).css("background-color","rgb("+r+","+g+","+b+")");
 }
 if (!ele)return;
 width=width||100;
 //定义变量
 var eles=this.find(ele);
 var nowW=this.width()-(eles.length-1)*width;
 var avgW=this.width()/eles.length;
 //设置颜色
 eles.each(function (index,element) {
 setBgc(element);
 });
 //添加多个事件
 eles.on({
 "mouseenter":function () {
  $(this).stop().animate({
  width:nowW
  }).css("background-size","100% 100%").siblings().stop().animate({
  width:width
  }).css("background-size","auto");
 },
 "mouseleave":function () {
  eles.stop().animate({
  width:avgW
  }).css("background-size","auto");
 }
 });
 return this;
}

以上就是封装的代码,在导入jq文件后,我们就可以直接调用了?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    div {
      width: 1200px;
      height: 400px;
      /*border: 2px solid #000;*/
      margin: 100px auto;
      overflow: hidden;
    }
    ul{
      width: 1220px;
    }
    li {
      width: 240px;
      height: 400px;
      float: left;
    }
  </style>
</head>
<body>
<div id="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="jquery-accordion.js"></script>
<script>
 //调用封装的插件
  $("#box").accordion("li").find("li").each(function (index,ele) {
    $(ele).css("background-image","url(images/"+(index+1)+".jpg)");
  });
</script>
</body>
</html>

以上就是简易手风琴插件的封装和调用,最后附上最终效果图:

jquery简易手风琴插件的封装

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 #jQuery
jQuery实现二级导航菜单的示例
Sep 30 #jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 #jQuery
jQuery实现带进度条的轮播图
Sep 13 #jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 #jQuery
jQuery实现简单全选框
Sep 13 #jQuery
jQuery+ajax实现用户登录验证
Sep 13 #jQuery
You might like
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
关于尾递归的使用详解
2013/05/02 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
Python3常用内置方法代码实例
2019/11/18 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
英文商务邀请信
2014/01/22 职场文书
白酒市场营销方案
2014/02/25 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
说明书怎么写
2014/05/06 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
高中学校对照检查材料
2014/08/31 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
学生打架检讨书
2014/10/20 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
使用nginx配置访问wgcloud的方法
2021/06/26 Servers