JQuery 插件的编写
2017-11-15 本文已影响0人
海山城
定义一个插件
$.fn.plug = function(){
console.log(this)
//想要实现的代码
}
- plug为任意自定义的函数名
- jquery插件中的this指的是调用插件函数的那个节点元素，并且此this可以不加$符号。这是定义插件的最大好处，这样可以需要实现相同效果的节点元素复用
使用插件
$(node).plug()
实例
举个列子，我想实现这样一个通用的效果，使一行文字以某种酷炫的效果展示出来（可以用于歌词的展示等），如下
image
html
<!DOCTYPE html>
<html>
<head>
<script src="//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" href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.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 '<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')
})
