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

在线预览    源码下载