html5

解决移动端mp3音乐播放器问题

    function createAudio(src,loop){
        var a=new Audio(); 创建一个新的audio
        a.src=src;  
        a.preload='auto';
        a.loop=loop;  
        return a;
    }
    var audios={
        bgmAll1:createAudio('music/Promise.mp3',true), 音乐的路径
        bgmAll2:createAudio('music/s.mp3',true)，音乐的路径
    };

    audios.bgmAll1.play();  调用方法

移动端：是否进入页面，如果进入下一个页面的话 那么执行 这个页面的动画，否则不执行动画

解决方法：
    判断他的节点数，这里的progress是swiper里面一个方法，用这个方法来判断数字。
 if(progress<0.16){
                            swiperSlides.each(function (index,ele) {
                                let _index=index+1;
                                swiperSlides.removeClass('page'+_index+'Ani');
                                swiperSlides.eq(0).addClass('page1Ani');
                                $('.page7_box_wap').css('display','none');
                            })
                            console.log('第一屏')
                        }else if(progress>0.16 && progress <= 0.33){
                            swiperSlides.each(function (index,ele) {
                                let _index=index+1;
                                swiperSlides.removeClass('page'+_index+'Ani');
                                swiperSlides.eq(1).addClass('page2Ani');
                                $('.page7_box_wap').css('display','none');
                            })
                            console.log('第二屏')
                        }else if(progress>0.33 && progress <0.5){
                            swiperSlides.each(function (index,ele) {
                                let _index=index+1;
                                swiperSlides.removeClass('page'+_index+'Ani');
                                swiperSlides.eq(2).addClass('page3Ani');
                                $('.page7_box_wap').css('display','none');
                            })
                            console.log('第三屏')
                        }else if(progress>=0.5 && progress <= 0.66){
                            swiperSlides.each(function (index,ele) {
                                let _index=index+1;
                                swiperSlides.removeClass('page'+_index+'Ani');
                                swiperSlides.eq(3).addClass('page4Ani');
                                $('.page7_box_wap').css('display','none');
                            })
                            console.log('第四屏')
                        }else if(progress>0.66 && progress <= 0.83){
                            swiperSlides.each(function (index,ele) {
                                let _index=index+1;
                                swiperSlides.removeClass('page'+_index+'Ani');
                                swiperSlides.eq(4).addClass('page5Ani');
                                $('.page7_box_wap').css('display','none');
                            })
                            console.log('第五屏')
                        }else if(progress>0.83 && progress<1){
                            swiperSlides.each(function (index,ele) {
                                let _index=index+1;
                                swiperSlides.removeClass('page'+_index+'Ani');
                                swiperSlides.eq(5).addClass('page6Ani');
                                $('.page7_box_wap').css('display','none');
                            });
                            console.log('第六屏')
                        }else if(progress>=1){
                            swiperSlides.each(function (index,ele) {
                                let _index=index+1;
                                swiperSlides.removeClass('page'+_index+'Ani');
                                swiperSlides.eq(6).addClass('page7Ani');
                                $('.page7_box_wap').css('display','block');
                            })
                            console.log('第七屏');

jq 打字的效果：
 $(document).ready(function () {
        $('.con_bj_text1').textillate({
            initialDelay: 1000, //设置动画开始时间
            in: { effect: 'flipInX' //设置动画名称
            }
        });
    });