青叶个人博客的第一个JQ插件,在此奉上,希望大家能够用得上,经过一些测试,在使用上是没有什么太大问题的,但毕竟是个人的初次JQ插件编写,一些技术上的细节可能并不成熟,也许也有一些未知的bug,如果大家在使用插件的过程中发现了可优化的地方,请一定在博客中留言告知,多谢!好了,废话不多说了,插件奉上。
插件名:myAnimate
插件功能:指定需要运用动画的DOM元素,当该元素(或一些元素)到达浏览器的可视区域时,执行你自己定义好的动画。(css动画博大精深,故此插件中并没有写具体的动画效果,也不可能写完,所有的动画效果都需要自行编写,这也使得插件的可扩展性更强)
插件使用:
$(“yourAnimateElement”).myAnimate({
animateClass: “demo”
})
提供接口:
animateClass:”demo”, //自己编写动画的名称
opacty: 0, //初始透明 选填 默认为0
animateRestrict: 0, //动画限制 选填 默认为1200px屏幕以下不执行动画
ieAnimate: true //IE动画 选填 默认为false关闭IE动画
温馨提示:由于具体的动画效果需要自行定义,故在编写css动画的时候,请一定要注意css动画兼容性。
具体代码以及demo:
/**通用动画jQuery插件 jQuery-animate.js 功能:元素进入可视窗口,执行动画class,动画class效果自行编写
made by 青叶 in 2018.10.29
插件使用:$('yourAnimateElement').myAnimate({ animateClass: 'demo'});
代码分析: 1.ifIE() 根据调用者的要求决定是否开启IE浏览器的动画效果
2.ifWinWidth() 分析用户浏览设备的屏幕宽度,根据插件调用者自定义的设备宽度,判断在什么设备上执行动画
3.bindEvent() 对window绑定scroll事件,出于性能方面的考虑,采用闭包节流的方式控制
4.mainAnimation() 主要的动画代码
5.destructor() 动画执行完毕,销毁绑定的scroll事件,优化性能
*/
(function ($) {
function MyAnimate(el, opts) {
this.init(el, opts);
}
MyAnimate.OPTS = {
animateClass: 'demo', //动画class 必填 否则没有动画效果
opacity: 1, //初始透明 选填 默认为1
animateRestrict: 1200, //动画限制 选填 默认为1200px,即以设备宽1200px及以上可以显示动画
ieAnimate: false //IE动画 选填 默认为false,即默认关闭IE动画,为true则开启IE动画,注意css3的兼容性
};
MyAnimate.prototype.init = function (el, opts) {
this.$el = $(el);
this.opts = $.extend({}, MyAnimate.OPTS, opts);
this.$win = $(window);
this.ifIE();
};
MyAnimate.prototype.ifIE = function () {
if (this.opts.ieAnimate===false) return false;
else this.ifWinWidth();
};
MyAnimate.prototype.ifWinWidth = function () {
if (this.$win.width() >= this.opts.animateRestrict) {
this.bindEvent();
this.mainAnimation();
}
};
MyAnimate.prototype.bindEvent = function () {
var _this = this,
timer = null;
this.fn = function () {
if (timer) return;
timer = setTimeout(function () {
_this.mainAnimation();
timer = null;
}, 150)
};
this.$win.on('scroll', this.fn) //window绑定事件scroll
};
MyAnimate.prototype.mainAnimation = function () {
var self = this,
$el = this.$el;
$el.css({opacity: self.opts.opacity}); //设定初始状态的透明度
$el.each(function () { //遍历所有未完成动画的元素
if (!this.loaded) {
if (inVisibleArea(this)) {
appear(this)
}
}
});
function inVisibleArea(elem) { //检测动画元素是否进入可视窗口
var $win = self.$win;
//滚动高度 + 可视区域高度 >= 元素到文档顶部的高度 结果为true 元素已经进入了可视区域,或者曾经进入过可视区域
return $win.scrollTop() + $win.height() >= $(elem).offset().top;
}
if (isAllLoaded()) { //全部动画完成,销毁绑定的scroll事件,优化性能
self.destructor();
}
function isAllLoaded() { //检测是否所有元素完成动画
return $el.length === 0
}
function appear(elem) { //可视窗口,执行动画,剔除已经完成动画的元素,避免重复遍历循环,优化性能
// $(elem).css("animation", self.opts.animateName + " " + self.opts.duration + " " + self.opts.timingFunction + " " + self.opts.delay + " " + self.opts.iterationCount + " " + self.opts.direction + " " + self.opts.fillMode);
$(elem).addClass(self.opts.animateClass);
elem.loaded = true;
var tmp = $.grep($el, function (elem) { //剔除已经完成动画的元素,避免重复遍历循环,优化性能
return !elem.loaded;
});
$el = $(tmp)
}
};
MyAnimate.prototype.destructor = function () { //当所有动画完成 销毁绑定的事件 优化性能
this.$win.off('scroll', this.fn)
};
//业务代码完成
$.fn.extend({
myAnimate: function (opts) { //myAnimate 外部调用插件名
new MyAnimate(this, opts);
return this;
}
})
})(jQuery);
演示demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-animate-test1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="jQuery-animate.js"></script>
<style>
strong,h2{
display: block!important;
margin: 2% 0;
font-size: 24px;
}
.test1{
height: 500px;
border: 1px solid red;
}
/* 实际生产中注意@keyframes的兼容性 */
@keyframes animation_strong{
from{opacity:0;transform: translateY(100%)}
to{opacity:1;transform: translateY(0)}
}
.demoH2{
-webkit-animation: animation_strong 1s 0s linear 1 normal forwards;
-moz-animation: animation_strong 1s 0s linear 1 normal forwards;
-o-animation: animation_strong 1s 0s linear 1 normal forwards;
animation: animation_strong 1s 0s linear 1 normal forwards;
}
@keyframes animation_p{
from{opacity:0;transform: translateY(100%)}
to{opacity:1;transform: translateY(0)}
}
.demoP{
-webkit-animation: animation_p 1s 0s linear 1 normal forwards;
-moz-animation: animation_p 1s 0s linear 1 normal forwards;
-o-animation: animation_p 1s 0s linear 1 normal forwards;
animation: animation_p 1s 0s linear 1 normal forwards;
}
</style>
</head>
<body>
<div class="test1">
<h2>AC1200 Wi-Fi and AV1200 Gigabit Powerline Kit</h2>
<p>Equipped with Mains Filter and Built-in QoS, NWP507G2 assures a high quality of bandwidth sensitive applications such as voice and video, with no interfering power supply on other devices to bother.</p>
</div>
<div class="test1">
<h2>AC1200 Wi-Fi and AV1200 Gigabit Powerline Kit</h2>
<p>Equipped with Mains Filter and Built-in QoS, NWP507G2 assures a high quality of bandwidth sensitive applications such as voice and video, with no interfering power supply on other devices to bother.</p>
</div>
<div class="test1">
<h2>AC1200 Wi-Fi and AV1200 Gigabit Powerline Kit</h2>
<p>Equipped with Mains Filter and Built-in QoS, NWP507G2 assures a high quality of bandwidth sensitive applications such as voice and video, with no interfering power supply on other devices to bother.</p>
</div>
<div class="test1">
<strong>AC1200 Wi-Fi and AV1200 Gigabit Powerline Kit</strong>
<p>Equipped with Mains Filter and Built-in QoS, NWP507G2 assures a high quality of bandwidth sensitive applications such as voice and video, with no interfering power supply on other devices to bother.</p>
</div>
<div class="test1">
<strong>AC1200 Wi-Fi and AV1200 Gigabit Powerline Kit</strong>
<p>Equipped with Mains Filter and Built-in QoS, NWP507G2 assures a high quality of bandwidth sensitive applications such as voice and video, with no interfering power supply on other devices to bother.</p>
</div>
<div class="test1">
<strong>AC1200 Wi-Fi and AV1200 Gigabit Powerline Kit</strong>
<p>Equipped with Mains Filter and Built-in QoS, NWP507G2 assures a high quality of bandwidth sensitive applications such as voice and video, with no interfering power supply on other devices to bother.</p>
</div>
<script>
$('.test1>h2').add('.test1>strong').myAnimate({
animateClass: 'demoH2',
opacity: 0, //初始透明 选填 默认为0
animateRestrict: 0, //动画限制 选填 默认为1200px,即以设备宽1200px及以上可以显示动画
ieAnimate: true //IE动画 选填 默认为false,即默认关闭IE动画,为true则开启IE动画,注意css3的兼容性
});
$('.test1>p').myAnimate({
animateClass: 'demoP',
opacity: 0, //初始透明 选填 默认为0
animateRestrict: 0, //动画限制 选填 默认为1200px,即以设备宽1200px及以上可以显示动画
ieAnimate: true //IE动画 选填 默认为false,即默认关闭IE动画,为true则开启IE动画,注意css3的兼容性
})
</script>
</body>
</html>
好了,JQ插件到这里就介绍完毕,如果大家在使用过程中发现有什么问题,请在此留言告知,将尽快修改。谢谢!更多插件尽在青叶博客!