H5中实现图片的涂抹擦除--利用jquery.eraser.js插件
在利用swiper为主体的H5中实现图片的涂抹擦除效果。
一。HTML部分
1.在<body>中独立定义擦除层，代码如下：
<div id="cabeibox">
<div id="cabeiinbox">
<img src="img/12-1.png" alt="" id="cabei" />
</div>
</div>
该div独立于swiper-container之外。
2.引用js插件jquery.eraser.js，代码如下：
<script src="/js/jquery.eraser.js"></script>
二。CSS部分
*注意，此处定义是都是ID。
#cabei {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
max-height:100%;
max-width:100%;
}
#cabeiinbox {
position:relative;
left:0;
top:0;
right:0;
bottom:0;
width:100%;
height:100%;
}
#cabeibox {
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
width:100%;
height:100%;
z-index:-201;
max-width:100%;
max-height:100%;
}
三、JS部分
1.定义擦除完成函数cleareraser，代码如下：
function cleareraser() {
//setTimeout('$.fn.fullpage.setAllowScrolling(true);', 2000);
$('#cabeibox').css("z-index", -200).hide();
$('#sliderarr').show();
}
2.在swiper定义中，跟踪擦除层，代码如下：
var swiper = new Swiper('.swiper-container-v', {
direction: 'vertical',
mousewheelControl: true,
noSwiping: true,
onSlideChangeEnd: function (swiper) {
console.log(swiper.activeIndex);
if (swiper.activeIndex == 10) {//在需要涂抹层出现的一页
$('#sliderarr').hide();
$('.p11e1').show();
$('.p11e2').show();
$(function () {
var progress = $('#cabei').eraser('progress');
if (progress < 0.5) {
var w = $(window).width();
var h = $(window).height();
$('#cabei').width(w).height(h);
$('#cabei').eraser({
completeRatio: 0.5,
completeFunction: cleareraser,
scrwidth: w,
scrheight: h
});
$('#cabeibox').css("z-index", 200);
//$('#delay').removeClass("active");
//$('#eraserTooltip').show();
//alert(progress);
}
});
}
}
});
该代码实现效果如下：
当页面滑动到11页（activeIndex==10），显示涂抹层；
涂抹到图片面积一半，涂抹层消失，显示第11页内容。
（以上部分代码学习自《小象的心声》H5，特此感谢。）
Amy zhang
2016.05.09