Jquery自定义插件

         上一篇中介绍了几种不一样功能的插件，就应该去思考插件是怎么样产生的，插件是用户为了方便使用，将一个功能，或者某种样式进行了一种封装。

使用者只用调用方法，或者选择器等就能够了。这种思路很常见，敲代码的人老是想着如何更大效率的去优化本身的代码。

        举个列子：

如上个列子的lazyLoad在js中调用lazyload()方法咱们知道jq或者原生js都没有这个方法能够调用，它调用的是这个插件中的自定义的方法

为了不与其余的正常src产生冲突，又为img从新定义了data-src 这也是img标签不具有的属性 这就要看这个插件的js了

 jquery常见的中扩展方法

1.$.extend   全局方法  格式以下：（注html里没有代码  需导入jquery.js)

 2.$.fn.extend   对象方法  格式以下：（注html里没有代码  需导入jquery.js)

 能够看看效果图两个标签将都会为blue（代码简短不妨动手试试）

 简单是实例了一下两个方法，下面以上次的消息滚动为列从新为他修改一下：https://www.cnblogs.com/2979100039-qq-con/p/12715306.html

body的代码，不做修改，来从新构造js里的代码  body内容以下

css 内容

*{
margin: 0px;
padding: 0px;
font-size: 18px;
font-family:"comic sans ms";
}
html{cursor: url('img/指针01.png'),auto;}
img{ float: left;width: 60px;height: 60px; border-radius: 50%; padding: 5px;box-sizing: border-box; margin-right:20px ;}
ul{list-style: none;border-radius: 6px;}
li{height: 80px;padding: 10px;border-bottom: 1px solid #ccc;box-sizing: border-box;background-color: #eee;cursor: pointer;}
h3{font-size: 18px;margin: 10px 1px; }
p{font-size: 14px; color: #333333;}
#file0{
width: 600px;
height: 320px;
margin: auto;
position: relative;
top: 80px;
overflow: hidden;
border: 1px solid #ccc;;
}
li:hover{
background-color: #a3a3a3;
transform: scale(1.01);
transition: .4s;
}

<ul id="file0">
                <li>
                  <img src="img/人物01.jpg" >
                  <h3>这是第一条消息h3>
                  <p>今天心星期三天气晴p>
              li>
              <li>
                  <img src="img/人物02.jpg" >
                  <h3>这是第二条消息h3>
                  <p>今天心星期三天气晴p>
              li>
              <li>
                  <img src="img/人物03.jpg" >
                  <h3>这是第三条消息h3>
                  <p>今天心星期三天气晴p>
              li>
              <li>
                  <img src="img/人物04.jpg" >
                  <h3>这是第四条消息h3>
                  <p>今天心星期三天气晴p>
              li>
              <li>
                  <img src="img/人物05.jpg" >
                  <h3>这是第五条消息h3>
                  <p>今天心星期三天气晴p>
              li>
              <li>
                  <img src="img/人物06.jpg" >
                  <h3>这是第六条消息h3>
                  <p>今天心星期三天气晴p>
              li>
          ul>

一样的在页面内须要导入jquery.js，js代码以下：

/自定义一个插件$.fn.extend({
 Messageroll:function(option){            // option为对象
    option = option || {};                //当对象没有传值时设option为空避免undefined
    option.limit = option.limit || 3;     //设置limit属性初始值为3
    option.spend = option.spend || 3000;  //设置spend属性初始值为3000
    option.cease = option.cease || false; //设置cease属性初始值为false
    
     var that = this;                     
     var height = 0;        //初始化速度
     that.children().each(function(index){   /* 设置消息展现高度*/
        if(index<option.limit){
            height += parseFloat($("li").innerHeight());
        } 
     });
     that.css({"overflow":"hidden","height":height+"px"});  /* 为消息界面修改高度 达到展现多少条消息 limit属性传值为1即为一条 */
     
     var mun = setInterval(function(){                      /* 定时器 spend属性控制多长时间跟换一次 */
          $("li:last").hide("slow").prependTo($("#file0")).slideDown();
     },option.spend );     
     if(option.cease == true){                           /* 悬浮是否中止滚动  spend属性默认为flase 即为不中止,设置为true即为中止*/  
         $("li").hover(function(){
               clearInterval(mun);
          },function(){
            mun = setInterval(function(){
                      $("li:last").hide("slow").prependTo($("#file0")).slideDown();
                 },option.spend );
          });
     }
 }
});

接下就是调用这个方法：

 
              $("#file0").Messageroll({
                  limit:3,      //显示的消息条数  默认为3条
                  cease:false,  //鼠标悬浮是否中止默认为false
                  spend:2000,   //时间，默认为3000              });          " _ue_custom_node_="true">

这样子就达到了一个封装的功能，当你要调整消息的属性时，只须要更改这三个的属性值。固然也能够给别的对象使用

css的样式封装就很容易了，就将样式相同的写在一个选这器，而后在对象上面写上就能够

如   .color-red{color:red}    

简单的学习一下   我的学习，不足之处不少