jQuery.eraser – jQuery橡皮擦插件

一、简介

jQuery.eraser 是一个基于 jQuery 的插件，它的效果类似于橡皮擦，按住鼠标不放，在图片上面来回移动，上面灰色的图片就会被擦出，显示出下面彩色的图片。

二、使用方法

1、引入文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.eraser.js"></script>

2、HTML

<div class="main-content">
   <div class="main-info"></div>
   <img src="imgs/pit.png" class="response-img" id="redux"/>
</div>

3、CSS

.main-content{
    width: 14.0870rem;
    height: 5.3913rem;
    text-align: center;
    padding: 1.5rem 0;
    box-sizing: border-box;
    position: relative;
    margin: 0 auto;
}
.main-info{
    font-size: 0.8rem;
    letter-spacing: 3px;
}
.response-img{
    width: 14.0870rem;
    height: 5.3913rem;
    position: absolute;
    left: 0;
    top: 0;
}

4、JavaScript

$(window).load(function  () { //这个适用手机端，等图片加载完再显示，因为有可能会出现第一次加载图片没有加载完就不会出现canvas
        $('#redux').eraser( {
            size: 20,   //设置橡皮擦大小
            completeRatio: .3 ,//设置擦除面积比例
            completeFunction: showResetButton   //大于擦除面积比例触发函数
        });
        function showResetButton(){
            $(".main-info").text("谢谢光临").fadeIn(300)
        }
    })

5、配置

属性/方法类型默认值说明
size整数40橡皮擦大小
completeRatio浮点数0.7擦出比率
completeFunction函数null配合 completeRatio 使用，达到擦出比率后的函数
progressFunction函数null擦出后的回调函数，他接收一个参数，为擦出后的比率（0.0 – 1.0）
reset

重置，即还原成未擦出的状态，如：$(‘#yourImage’).eraser(‘reset’);
clear

清除，如：$(‘#yourImage’).eraser(‘clear’);

三、实例下载：

手机端刮奖效果jquery.eraser.js插件.zip


￥打赏
标签:

上一篇：Ionic组件之Cards

下一篇：Ionic组件之Checkbox