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}    

簡單的學習一下   我的學習，不足之處不少