jQuery使用eraser.js插件實(shí)現(xiàn)擦除、刮刮卡效果的方法【附eraser.js下載】
本文實(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ì)有所幫助。
相關(guān)文章
jQuery實(shí)現(xiàn)圖片左右滾動(dòng)特效
這篇文章主要介紹了jQuery合作伙伴左右滾動(dòng)特效，功能實(shí)現(xiàn)非常簡(jiǎn)單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)搜索歷史，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
下面小編就為大家?guī)硪黄猲oty – jQuery通知插件全面解析。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
jQuery操作CheckBox的方法介紹(選中,取消,取值)
本篇文章主要是對(duì)jQuery操作CheckBox的方法(選中,取消,取值)進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
用Jquery.load載入頁面實(shí)現(xiàn)局部刷新
用jquery.load的方法載入新的頁面，以實(shí)現(xiàn)局部刷新，可結(jié)果發(fā)現(xiàn)載入進(jìn)來的頁面與原來單獨(dú)的頁面不一樣，樣式?jīng)]了，關(guān)于這個(gè)問題，下面有個(gè)不錯(cuò)的解決方法2014-01-01
基于jquery的內(nèi)容循環(huán)滾動(dòng)小模塊（仿新浪微博未登錄首頁滾動(dòng)微博顯示）
新浪微博未登錄首頁有一個(gè)“大家正在說”的模塊，動(dòng)態(tài)滾動(dòng)最新發(fā)布的微博。2011-03-03
JQuery 應(yīng)用 JQuery.groupTable.js
在以往的項(xiàng)目中，數(shù)據(jù)瀏覽用的都table 的形式展現(xiàn)。如下圖1， 這是一個(gè)很常見的表格。通常對(duì)分類的字段先進(jìn)行排序。為了讓分類表現(xiàn)的更直觀。2010-12-12
jQuery選擇器源碼解讀（六）：Sizzle選擇器匹配邏輯分析
這篇文章主要介紹了jQuery選擇器源碼解讀（六）：Sizzle選擇器匹配邏輯分析,,需要的朋友可以參考下2015-03-03
雖然前面已經(jīng)寫過兩篇關(guān)于DivAlert的隨筆了，也已經(jīng)實(shí)現(xiàn)了我的需求，但是今天發(fā)現(xiàn)很多jQuery插件代碼中都使用了extend方法，這樣確實(shí)讓默認(rèn)設(shè)置的代碼減少了許多。2010-04-04
以前總是沒搞明白是怎么回事，現(xiàn)在是迫不得已，就仔細(xì)看了看說明文檔，終于測(cè)試成功了，記下2011-12-12