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);
  }
});

否則，後面設定的畫筆大下和呼叫函式是沒有作用的。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。