欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery擦除插件eraser使用方法詳解

 更新時間：2020年01月11日 11:39:15   作者：fengzhen8023  
這篇文章主要為大家詳細(xì)介紹了jQuery擦除插件eraser的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

eraser插件簡介：

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

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

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.更多配置選項(xiàng)

//設(shè)置擦出畫筆的大小
$('#cover').eraser({size:80});
//點(diǎn)擊"重置"按鈕，將畫布重置
$('#reset').click(function(){
 $('#cover').eraser('reset');
});
//點(diǎn)擊"清除"按鈕，將整塊畫布擦除
$('#remove').click(function(){
 $('#cover').eraser('clear');
});
//當(dāng)擦出率達(dá)到50%的時候，調(diào)用函數(shù)
$('#cover').eraser({
 completeRatio: 0.1,
 completeFuction:function(){
  alert("擦除已經(jīng)達(dá)到50%");
 }
});

6.注意事項(xiàng)

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

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

否則，后面設(shè)置的畫筆大下和調(diào)用函數(shù)是沒有作用的。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論