jQuery使用eraser.js插件實(shí)現(xiàn)擦除、刮刮卡效果的方法【附eraser.js下載】

發(fā)布時(shí)間：2020-08-24 23:24:41 來源：腳本之家閱讀：272 作者：一步小僧欄目：web開發(fā)

本文實(shí)例講述了jQuery使用eraser.js插件實(shí)現(xiàn)擦除、刮刮卡效果的方法。分享給大家供大家參考，具體如下：

jquery.eraser是一款使用鼠標(biāo)或觸摸的動(dòng)作來擦除畫布顯示真正圖片的插件。jquery.eraser插件的原理是用一個(gè)畫布遮住圖片，然后根據(jù)觸摸或鼠標(biāo)輸入來擦除畫布顯示圖片，您可以在參數(shù)中指定一個(gè)回調(diào)函數(shù)設(shè)置畫筆大小。

使用需知：

必須確保圖片是完全加載之后調(diào)用eraser(),否則它不會(huì)工作。插件正常運(yùn)行在Safari，Chrome OS X和Windows，Android和iOS Firefox，黑莓瀏覽器。

使用方法：

引入核心文件

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src='jquery.eraser.js' type='text/javascript'></script>

使用以下代碼將圖像變成一個(gè)可擦除畫布。

$('#yourImage').eraser();

添加選項(xiàng)指定畫筆大小,(默認(rèn)值為40):

$('#yourImage').eraser( { size: 30 } );
// 也可以以下面的方式來實(shí)現(xiàn)
// $('#yourImage').eraser( "size", 30 }

可以設(shè)置參數(shù)來重置畫布

$('#yourImage').eraser('reset');

可以通過設(shè)置clear參數(shù)來清除所有的畫布

$('#yourImage').eraser('clear');

下面的代碼實(shí)現(xiàn)當(dāng)畫布被擦除50%時(shí)觸發(fā)事件showResetButton。

$('#yourImage').eraser( {
  completeRatio: .5,
  completeFunction: showResetButton
});

附：jquery.eraser.js點(diǎn)擊此處本站下載。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

向AI問一下細(xì)節(jié)

jQuery使用eraser.js插件實(shí)現(xiàn)擦除、刮刮卡效果的方法【附eraser.js下載】

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

jQuery使用eraser.js插件實(shí)現(xiàn)擦除、刮刮卡效果的方法【附eraser.js下載】