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单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jquery实现简单自动轮播图效果
Jul 29 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写入数据库类代码分享
2011/07/26 PHP
php支付宝接口用法分析
2015/01/04 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
pytorch实现查看当前学习率
2020/06/24 Python
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
新闻编辑求职信
2014/04/09 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
2014年教学工作总结
2014/11/13 职场文书
技术员岗位职责
2015/02/04 职场文书