H5--实现“扫描指纹”进入下一页效果

利用JS语句实现“扫描指纹”进入下一页的效果。

一、HTML部分

正常定义图片。

二、CSS部分

定义指纹图片闪烁效果的类“go”，代码如下：

.swiper-slide-active .go {
    opacity:1;
    -webkit-animation-name:flash;
    -webkit-animation-duration:0.2s;
    -webkit-animation-delay:0s;
    -webkit-animation-iteration-count:3;
}

*注意，此类在CSS中定义，在js中附加到指纹图片上。

三、JS部分

1.初始状态，文档加载完成，定义指纹图片。代码如下：

$(document).ready(function () {

    //扫描指纹
    $('.p0e2').click(function () {
        $('.p0e2').addClass('go');
        setTimeout('swiper.slideNext();', 1000);       
    })
})

2.定义翻过第一页后，移除类go（防止翻页回去类go仍存在）。代码如下：

var swiper = new Swiper('.swiper-container-v',{

    onSlideChangeEnd: function (swiper) {
        console.log(swiper.activeIndex);

        //翻页后删除指纹图片上的类
        if (swiper.activeIndex == 1) {
            $('.p0e2').removeClass('go');
        }

    }
})

实现效果如下：

在首页，点击指纹图片，指纹闪烁，并进入下一页；

重新翻到首页，点击指纹图片，可重复效果。

2016.05.09