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; 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{
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 );
          });
     }
 }
});

接下就是调用这个方法：

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

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

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

如 .color-red{color:red}

<div class="color-red"></div>
<p class="color-red"></p>

简单的学习一下个人学习，不足之处很多