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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 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下封装较好的数字分页方法
2010/11/23 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
php调用c接口无错版介绍
2014/03/11 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
Python列表如何更新值
2020/05/27 Python
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
造型师求职自荐信
2013/09/27 职场文书
服装店营销方案
2014/03/10 职场文书
档案信息化建设方案
2014/05/16 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书