本文實例講述了jQuery使用eraser.js插件實現(xiàn)擦除、刮刮卡效果的方法。分享給大家供大家參考,具體如下:
jquery.eraser是一款使用鼠標(biāo)或觸摸的動作來擦除畫布顯示真正圖片的插件。jquery.eraser插件的原理是用一個畫布遮住圖片,然后根據(jù)觸摸或鼠標(biāo)輸入來擦除畫布顯示圖片,您可以在參數(shù)中指定一個回調(diào)函數(shù)設(shè)置畫筆大小。
使用需知:
必須確保圖片是完全加載之后調(diào)用eraser(),否則它不會工作。插件正常運行在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>
使用以下代碼將圖像變成一個可擦除畫布。
$('#yourImage').eraser();添加選項指定畫筆大小,(默認值為40):
$('#yourImage').eraser( { size: 30 } );// 也可以以下面的方式來實現(xiàn)// $('#yourImage').eraser( "size", 30 }可以設(shè)置參數(shù)來重置畫布
$('#yourImage').eraser('reset');可以通過設(shè)置clear參數(shù)來清除所有的畫布
$('#yourImage').eraser('clear');下面的代碼實現(xiàn)當(dāng)畫布被擦除50%時觸發(fā)事件showResetButton。
$('#yourImage').eraser( { completeRatio: .5, completeFunction: showResetButton});附:jquery.eraser.js點擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
新聞熱點
疑難解答
圖片精選