您的位置：首页 > Web前端 > JQuery

H5中实现图片的涂抹擦除--利用jquery.eraser.js插件

2016-05-09 10:18 603 查看

在利用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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航