jquery图片马赛克过渡动画特效插件

当前位置:主页 > jQuery库 > 图片效果 > jquery图片马赛克过渡动画特效插件
jquery图片马赛克过渡动画特效插件
分享:

    插件介绍

    jquery-pixelbrush是一款图片马赛克过渡动画特效jquery插件。jquery-pixelbrush插件能够通过js和html5 canvas,将图片以马赛克过渡动画的方式显示出来。

    浏览器兼容性

    浏览器兼容性
    时间:2017-07-26
    阅读:
麦子学院
简要教程

jquery-pixelbrush是一款图片马赛克过渡动画特效jquery插件。jquery-pixelbrush插件能够通过js和html5 canvas,将图片以马赛克过渡动画的方式显示出来。

使用方法

jquery-pixelbrush插件依赖于jquery.newPlugin.js和jquery.actual.min.js插件,使用时需要将它们引入。

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.newPlugin.js"></script>      
<script src="path/to/jquery.actual.min.js"></script>      
<script src="path/to/jquery.pixelbrush.js"></script>      
                
HTML结构

将要制作马赛克过渡动画效果的图片(最好是PNG图片)放在页面中。然后可以直接通过data-*属性来配置各种参数。

<img id="image-id"
     data-plugin="pixelbrush"
     data-mode="fade-in"
     data-loop="false"
     data-autostart="true"
     data-ignore-class="hide"
     data-interval="15"
     data-oncomplete="doSomething();"
     src="image-with-alpha.png"
     class="img-responsive hide" alt="" />            
                

data-mode属性是配置过渡动画的类型,可选值有:fade-in, fade-out, focus, focus-in, unfocus, unfocus-out 和 bounce。

data-ignore-class属性用于指定在开始时要隐藏的元素的class。仅和fade-in,focus-in和focus三种模式联合使用。

初始化插件

也可以通过js来对该马赛克过渡动画插件进行初始化。

$(window).on('load', function() {
    $('#image-id').pixelbrush({
        mode: 'fade-in',
        loop: false,
        ignore_class: 'hide',
        interval: 15,
        onComplete: function() {
            doSomething();
        }
    });
});
                

要销毁该马赛克过渡动画插件,可以使用下面的方法:

$('#image-id').pixelbrush('destroy');                 
                

jquery-pixelbrush马赛克过渡动画特效jquery插件的github地址为:https://github.com/seanmsimon/jquery-pixelbrush

网友评论