溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了jQuery使用eraser.js插件實現擦除、刮刮卡效果的方法。分享給大家供大家參考，具體如下：
jquery.eraser是一款使用鼠標或觸摸的動作來擦除畫布顯示真正圖片的插件。jquery.eraser插件的原理是用一個畫布遮住圖片，然后根據觸摸或鼠標輸入來擦除畫布顯示圖片，您可以在參數中指定一個回調函數設置畫筆大小。
使用需知：
必須確保圖片是完全加載之后調用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 } );
// 也可以以下面的方式來實現
// $('#yourImage').eraser( "size", 30 }
可以設置參數來重置畫布
$('#yourImage').eraser('reset');
可以通過設置clear參數來清除所有的畫布
$('#yourImage').eraser('clear');
下面的代碼實現當畫布被擦除50%時觸發事件showResetButton。
$('#yourImage').eraser( {
completeRatio: .5,
completeFunction: showResetButton
});
附：jquery.eraser.js點擊此處本站下載。
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
