怎么在jQuery中使用eraser插件

本篇文章為大家展示了怎么在jQuery中使用eraser插件，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

eraser插件簡介：

1.jQuery.eraser 是一個基于 jQuery 的插件，它的效果類似于橡皮擦，按住鼠標不放，在圖片上面來回移動，上面灰色的圖片就會被擦出，顯示出下面彩色的圖片。

2.jQuery.eraser 的原理其實是有灰色、彩色兩張圖片（都需要自己事前準備），將灰色的圖片裝載于一個 canvas 中，然后和彩色的圖片用 CSS 定位在同一個位置，并設置 z-index 使 canvas 位于彩色圖片之上。當按住鼠標并在 canvas 上來回移動時，就出現了類似橡皮擦擦出的效果。

eraser使用方法：

1.引入文件

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

2.HTML

<div id="box">
 <img id="real" src="img/real.jpg" alt="底部">
 <img id="cover" src="img/cover.jpg" alt="上部">
</div>

3.CSS

*{
 margin: 0px;
 padding: 0px;
}
#box{
 width: 400px;
 position: relative;
 margin-left: 50%;
 left: -200px;
}
#box img{
 width: 100%;
 height: auto;
 position: absolute;
 float: left;
 z-index: 1;
}
#cover{
 width: 100%;
 height: auto;
 position: absolute;
 float: left;
 z-index: 999;
}

4.JavaScript

$(function(){
 $('#cover').eraser();
});

5.更多配置選項

//設置擦出畫筆的大小
$('#cover').eraser({size:80});

//點擊"重置"按鈕，將畫布重置
$('#reset').click(function(){
 $('#cover').eraser('reset');
});

//點擊"清除"按鈕，將整塊畫布擦除
$('#remove').click(function(){
 $('#cover').eraser('clear');
});

//當擦出率達到50%的時候，調用函數
$('#cover').eraser({
 completeRatio: 0.1,
 completeFuction:function(){
  alert("擦除已經達到50%");
 }
});

6.注意事項

需要說明的是，如果想設置畫筆的大小，設置擦除一定比例之后調用一個函數，要在初始化畫布的時候一同設置。例如：

$('#cover').eraser({
 size:80,
 completeRatio:0.5,
 completeFunction:function(){
  alert(666);
 }
});

上述內容就是怎么在jQuery中使用eraser插件，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。