JQuery 插件的编写

定义一个插件

$.fn.plug = function(){
  console.log(this)
  //想要实现的代码
}

• plug为任意自定义的函数名
• jquery插件中的this指的是调用插件函数的那个节点元素，并且此this可以不加$符号。这是定义插件的最大好处，这样可以需要实现相同效果的节点元素复用

使用插件

$(node).plug()

实例

举个列子，我想实现这样一个通用的效果，使一行文字以某种酷炫的效果展示出来（可以用于歌词的展示等），如下

image

html

  
  
  


  展示插件效果
  
欢迎来到饥人谷

JS
思路
step1：将p中的每个字都用span包裹起来，以便控制
step2：定义一个动画类，实现文字想要展现的效果，给每个span元素添加这个类就都有延时效果了。这里调用了现成的css3的动画。动画参照css3文字效果动画。动画的使用方法①引入css文件 ②给需要展示网站中对应效果的元素加上class：'animated XXX'，XXX为网页中对应效果名(如'animatied zoomIn')，注意XXX和animated中间有空格
step3：给每个span执行动画的时间设置一个间隔，最终就能达到图中所示的动画效果了
step4：后面每次想要使用该效果是直接调用就行了

//插件的定义
//定义插件
$.fn.boomText = function(type){
  type = type || 'rollIn'
  var str = this.text().split('').map(function(val, idx){
    //这里设置inline-block是因为rollIn对应的css3旋转效果需要inline-block
    return '' + val + ''
  }) 
  this.html(str.join(''))
  
  var index = 0
  var $boomTexts = this.find('span')
  var clock = setInterval(function(){
      $boomTexts.eq(index).addClass('animated ' + type)
      index++
      if(index >= $boomTexts.length){
        clearInterval(clock)
      }
  }, 300)
}

$('button').on('click',function(){
  //h1元素调用插件
  $('h1').boomText()
  //p元素调用插件
  $('p').boomText('zoomIn')
})