jQuery使用eraser.js插件實現(xiàn)擦除、刮刮卡效果的方法【附eraser.js下載】
本文實例講述了jQuery使用eraser.js插件實現(xiàn)擦除、刮刮卡效果的方法。分享給大家供大家參考，具體如下：
jquery.eraser是一款使用鼠標或觸摸的動作來擦除畫布顯示真正圖片的插件。jquery.eraser插件的原理是用一個畫布遮住圖片，然后根據(jù)觸摸或鼠標輸入來擦除畫布顯示圖片，您可以在參數(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)當畫布被擦除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è)計有所幫助。
相關(guān)文章
這篇文章主要介紹了jQuery 淡入/淡出效果函數(shù)用法,結(jié)合實例形式分析了jQuery 淡入/淡出功能fadeIn()、fadeOut()、fadeToggle()及fadeTo()函數(shù)基本功能、使用方法與操作注意事項,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了使用jQuery重置(reset)表單的方法,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了jQuery+css實現(xiàn)的換頁標簽欄效果,涉及jQuery動態(tài)操作頁面元素構(gòu)造換頁標簽的相關(guān)技巧,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了jQuery常見事件的監(jiān)聽方式，頁面經(jīng)常會有各種事件發(fā)生，事件發(fā)生后需要進行一些特定處理，即執(zhí)行特定的函數(shù)或者語句。這就需要對事件進行監(jiān)聽，下面關(guān)于監(jiān)聽事件的介紹，需要的小伙伴可以參考一下2022-03-03
基于jquery的彈出提示框始終處于窗口的居中位置（類似于alert彈出框的效果）
之前寫的代碼，都是在當前窗口位于居中，可是一旦窗口縮小或者放大都不是位于居中的位置了，但是一直想寫的一個類似于alert彈出窗口的效果。2011-09-09
這篇文章主要介紹了jQuery實現(xiàn)ichat在線客服插件,需要的朋友可以參考下2014-12-12
騰訊UED 漂亮的提示信息效果代碼，需要的朋友可以參考下。2011-09-09
jQuery插件開發(fā)的五種形態(tài)小結(jié)
這篇文章主要介紹了jQuery插件開發(fā)的五種形態(tài)小結(jié)，具體的內(nèi)容就是解決javascript插件的8種特征，非常的詳細，這里推薦給小伙伴們。2015-03-03
jquery對標簽添加只讀（readonly）或者禁用（disabled）屬性
這篇文章主要介紹了jquery對標簽添加只讀（readonly）或者禁用（disabled）屬性，jQuery是一個JavaScript庫。極大地簡化了JavaScript編程，下面關(guān)于其詳細介紹，需要的小伙伴可以參考一下2022-03-03
jQuery+jsp實現(xiàn)省市縣三級聯(lián)動效果(附源碼)
這篇文章主要介紹了jQuery+jsp實現(xiàn)省市縣三級聯(lián)動效果,以完整實例形式分析了jQuery結(jié)合jsp讀取MySQL數(shù)據(jù)庫操作實現(xiàn)省市縣三級聯(lián)動效果的相關(guān)技巧,并附帶完整實例源碼供讀者下載參考,需要的朋友可以參考下2015-12-12