图片/图形
图片马赛克过渡动画jQuery特效插件
PetitQ
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');
Github 地址：https://github.com/seanmsimon/jquery-pixelbrush
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
