定義一個插件
$.fn.plug = function(){
console.log(this)
//想要實現的代碼
}
- plug為任意自定義的函數名
- jquery插件中的this指的是調用插件函數的那個節點元素，并且此this可以不加$符號。這是定義插件的最大好處，這樣可以需要實現相同效果的節點元素復用
使用插件
$(node).plug()
實例
舉個列子，我想實現這樣一個通用的效果，使一行文字以某種酷炫的效果展示出來（可以用于歌詞的展示等），如下
image
html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>Jquery插件</title>
</head>
<body>
<button>展示插件效果</button>
<p>歡迎來到饑人谷</p>
</body>
</html>
JS
思路
step1：將p中的每個字都用span包裹起來，以便控制
step2：定義一個動畫類，實現文字想要展現的效果，給每個span元素添加這個類就都有延時效果了。這里調用了現成的css3的動畫。動畫參照css3文字效果動畫。動畫的使用方法①引入css文件 <link rel="stylesheet" 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 '<span style="opacity:0;display:inline-block">' + val + '</span>'
})
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')
})
