jQuery擦除插件eraser使用方法詳解
eraser插件簡(jiǎn)介：
1.jQuery.eraser 是一個(gè)基于 jQuery 的插件，它的效果類似于橡皮擦，按住鼠標(biāo)不放，在圖片上面來(lái)回移動(dòng)，上面灰色的圖片就會(huì)被擦出，顯示出下面彩色的圖片。
2.jQuery.eraser 的原理其實(shí)是有灰色、彩色兩張圖片（都需要自己事前準(zhǔn)備），將灰色的圖片裝載于一個(gè) canvas 中，然后和彩色的圖片用 CSS 定位在同一個(gè)位置，并設(shè)置 z-index 使 canvas 位于彩色圖片之上。當(dāng)按住鼠標(biāo)并在 canvas 上來(lái)回移動(dòng)時(shí)，就出現(xiàn)了類似橡皮擦擦出的效果。
eraser使用方法：
1.引入文件
<script src="js/jquery.min.js"></script> <script src="js/jquery.eraser.js"></script>
2.HTML
<div id="box"> <img id="real" src="img/real.jpg" alt="底部"> <img id="cover" src="img/cover.jpg" alt="上部"> </div>
3.CSS
*{
margin: 0px;
padding: 0px;
}
#box{
width: 400px;
position: relative;
margin-left: 50%;
left: -200px;
}
#box img{
width: 100%;
height: auto;
position: absolute;
float: left;
z-index: 1;
}
#cover{
width: 100%;
height: auto;
position: absolute;
float: left;
z-index: 999;
}
4.JavaScript
$(function(){
$('#cover').eraser();
});
5.更多配置選項(xiàng)
//設(shè)置擦出畫(huà)筆的大小
$('#cover').eraser({size:80});
//點(diǎn)擊"重置"按鈕，將畫(huà)布重置
$('#reset').click(function(){
$('#cover').eraser('reset');
});
//點(diǎn)擊"清除"按鈕，將整塊畫(huà)布擦除
$('#remove').click(function(){
$('#cover').eraser('clear');
});
//當(dāng)擦出率達(dá)到50%的時(shí)候，調(diào)用函數(shù)
$('#cover').eraser({
completeRatio: 0.1,
completeFuction:function(){
alert("擦除已經(jīng)達(dá)到50%");
}
});
6.注意事項(xiàng)
需要說(shuō)明的是，如果想設(shè)置畫(huà)筆的大小，設(shè)置擦除一定比例之后調(diào)用一個(gè)函數(shù)，要在初始化畫(huà)布的時(shí)候一同設(shè)置。例如：
$('#cover').eraser({
size:80,
completeRatio:0.5,
completeFunction:function(){
alert(666);
}
});
否則，后面設(shè)置的畫(huà)筆大下和調(diào)用函數(shù)是沒(méi)有作用的。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了分別用jQuery和CSS將背景圖片進(jìn)行拉伸，讓它在頁(yè)面中隨著瀏覽器尺寸進(jìn)行拉伸，就像我們的電腦桌面壁紙效果,需要的朋友可以參考下2015-10-10
3Z版基于jquery的圖片復(fù)選框(asp.net+jquery)
最近在做一個(gè)彩票縮水工具,找了幾個(gè)圖片復(fù)選框插件始終感覺(jué)不太滿意,自己動(dòng)手山寨了一下imageTick插件.2010-04-04
這篇文章主要介紹了12個(gè)超實(shí)用的JQuery代碼片段，代碼簡(jiǎn)潔，具有實(shí)用價(jià)值，感興趣的小伙伴們可以參考一下2015-11-11
jQuery實(shí)現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法,涉及jQuery針對(duì)頁(yè)面元素屬性的判斷與動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-09-09
下拉菜單是網(wǎng)站導(dǎo)航常用的表現(xiàn)形式之一，能夠呈現(xiàn)更多的導(dǎo)航內(nèi)容。如果網(wǎng)站能夠設(shè)計(jì)出有吸引力的網(wǎng)站導(dǎo)航，將會(huì)吸引更多的用戶去瀏覽網(wǎng)站的內(nèi)容2012-06-06
前沿視頻出的《精通Javascript+jQuery》視頻教程,挺不錯(cuò)的,值得看看。2009-08-08
詳解頁(yè)面滾動(dòng)值scrollTop在FireFox與Chrome瀏覽器間的兼容問(wèn)題
這篇文章主要介紹了詳解頁(yè)面滾動(dòng)值scrollTop在FireFox與Chrome瀏覽器間的兼容問(wèn)題 的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要為大家詳細(xì)介紹了jQuery日歷插件datepicker用法，感興趣的小伙伴們可以參考一下2016-03-03
jQuery實(shí)現(xiàn)手機(jī)版頁(yè)面翻頁(yè)效果的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery實(shí)現(xiàn)手機(jī)版頁(yè)面翻頁(yè)效果的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
jquery實(shí)現(xiàn)網(wǎng)頁(yè)的頁(yè)面平滑滾動(dòng)效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)網(wǎng)頁(yè)的頁(yè)面平滑滾動(dòng)效果代碼,涉及jQuery結(jié)合鼠標(biāo)事件操作頁(yè)面元素滾動(dòng)效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11