本篇文章為大家展示了怎么在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插件，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創新互聯行業資訊頻道。

網頁題目：怎么在jQuery中使用eraser插件
網頁鏈接：http://www.yijiale78.com/article46/gjhdeg.html

成都網站建設公司_創新互聯，為您提供網站導航、全網營銷推廣、響應式網站、網站建設、面包屑導航、虛擬主機

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯