在线建站培训
您的位置: 魔客吧站长论坛网页特效查看内容

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

轮子 发表于 2017-8-10 17:51:04 | 栏目:网页特效
网站特效
效果: 其它 
脚本: jQuery特效 
201707261510.jpg


简要教程
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');            
请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

售价:免费  [充值金币]  [免费赚金币]  [关于会员等级] 
下载权限: 无下载限制  [购买VIP]   [免费升VIP]

说明:本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!如有侵犯您的版权,请及时联系我们,我们将尽快处理。