|
...
|
...
|
@@ -3,44 +3,157 @@ |
|
|
|
* @author: wsl<shuiling.wang@yoho.cn>
|
|
|
|
* @date: 2017/01/17
|
|
|
|
*/
|
|
|
|
|
|
|
|
require('activity/annual-account.page.css');
|
|
|
|
|
|
|
|
var Swiper = require('yoho-swiper');
|
|
|
|
|
|
|
|
var share = require('../common/share');
|
|
|
|
var $ = require('yoho-jquery');
|
|
|
|
var $commonH = $('.ch'),
|
|
|
|
$nav2Img = $('.nav2-img'),
|
|
|
|
$audio = $('#audio');
|
|
|
|
|
|
|
|
var $audio = $('#audio');
|
|
|
|
var $video = $('#video');
|
|
|
|
var audioStatus = true;
|
|
|
|
var mySwiper;
|
|
|
|
|
|
|
|
$(function() {
|
|
|
|
$commonH.css({height: $(window).height()});
|
|
|
|
// 音频时间
|
|
|
|
function audioAction() {
|
|
|
|
document.addEventListener('WeixinJSBridgeReady', function() {
|
|
|
|
$audio[0].play();
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
$('.audio-btn').on('click', function() {
|
|
|
|
if ($(this).hasClass('audio-f')) {
|
|
|
|
$(this).removeClass('audio-f');
|
|
|
|
$audio[0].play();
|
|
|
|
audioStatus = true;
|
|
|
|
} else {
|
|
|
|
$(this).addClass('audio-f');
|
|
|
|
$audio[0].pause();
|
|
|
|
audioStatus = false;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
// 监听视频
|
|
|
|
function listenVideo() {
|
|
|
|
$video[0].addEventListener('playing', function() {
|
|
|
|
$audio[0].pause();
|
|
|
|
});
|
|
|
|
|
|
|
|
$video[0].addEventListener('pause', function() {
|
|
|
|
if (audioStatus) {
|
|
|
|
$audio[0].play();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
$video[0].addEventListener('ended', function() {
|
|
|
|
if (audioStatus) {
|
|
|
|
$audio[0].play();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
$(function() {
|
|
|
|
var $purdah1 = $('.purdah1'),
|
|
|
|
$nav2Img = $('.nav2-img'),
|
|
|
|
$purdahLeft = $('.purdah-left'),
|
|
|
|
$purdahRight = $('.purdah-right'),
|
|
|
|
$runMen = $('.run-men'),
|
|
|
|
$videoBox = $('.video'),
|
|
|
|
$spokesman = $('.spokesman'),
|
|
|
|
$tB = $('.txt-black'),
|
|
|
|
$tW = $('.txt-white'),
|
|
|
|
$hand = $('.hand'),
|
|
|
|
$commonH = $('.ch');
|
|
|
|
|
|
|
|
$commonH.css({height: $(window).height()});
|
|
|
|
|
|
|
|
audioAction();
|
|
|
|
listenVideo();
|
|
|
|
|
|
|
|
share({
|
|
|
|
imgUrl: 'https://feature.yoho.cn/300x300.png',
|
|
|
|
title: 'YOHO!BUY有货年度潮流账单——快来看看你的潮流形象！速戳>>',
|
|
|
|
link: $('#s-url').val(),
|
|
|
|
desc: 'YOHO!2016潮流轨迹'
|
|
|
|
});
|
|
|
|
|
|
|
|
mySwiper = new Swiper('.swiper-container', {
|
|
|
|
direction: 'vertical',
|
|
|
|
noSwiping: true,
|
|
|
|
noSwipingClass: 'stop-swiping',
|
|
|
|
onSlideChangeEnd: function(swiper) {
|
|
|
|
if (swiper.activeIndex === 1) {
|
|
|
|
var aIndex = swiper.activeIndex;
|
|
|
|
|
|
|
|
if (aIndex === 1) {
|
|
|
|
setTimeout(function() {
|
|
|
|
$nav2Img.addClass('n2-img-animation');
|
|
|
|
$('.purdah1').addClass('purdah1-animation');
|
|
|
|
$purdah1.addClass('purdah1-animation');
|
|
|
|
}, 300);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (aIndex === 2) {
|
|
|
|
$purdahLeft.addClass('purdah-l-animation');
|
|
|
|
$purdahRight.addClass('purdah-r-animation');
|
|
|
|
}
|
|
|
|
|
|
|
|
if (aIndex === 3) {
|
|
|
|
$runMen.fadeIn(1000);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (aIndex !== 4) {
|
|
|
|
$video[0].pause();
|
|
|
|
|
|
|
|
if (audioStatus) {
|
|
|
|
$audio[0].play();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (aIndex === 4) {
|
|
|
|
$videoBox.css({
|
|
|
|
opacity: 1
|
|
|
|
}).addClass('video-animation');
|
|
|
|
}
|
|
|
|
|
|
|
|
if (aIndex === 5) {
|
|
|
|
$spokesman.addClass('spokesman-animation');
|
|
|
|
setTimeout(function() {
|
|
|
|
$tB.addClass('txt-animation');
|
|
|
|
}, 500);
|
|
|
|
setTimeout(function() {
|
|
|
|
$hand.addClass('hand-animation');
|
|
|
|
}, 1000);
|
|
|
|
setTimeout(function() {
|
|
|
|
$tW.addClass('txt-animation');
|
|
|
|
}, 1500);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onSlideChangeStart: function(swiper) {
|
|
|
|
if (swiper.activeIndex === 2 || swiper.previousIndex === 2) {
|
|
|
|
$('.purdah-left').addClass('purdah-l-animation');
|
|
|
|
$('.purdah-right').addClass('purdah-r-animation');
|
|
|
|
var aIndex = swiper.activeIndex;
|
|
|
|
|
|
|
|
if (aIndex === 1 || aIndex === 3) {
|
|
|
|
$purdahLeft.removeClass('purdah-l-animation');
|
|
|
|
$purdahRight.removeClass('purdah-r-animation');
|
|
|
|
}
|
|
|
|
|
|
|
|
if (aIndex === 0 || aIndex === 2) {
|
|
|
|
$nav2Img.removeClass('n2-img-animation');
|
|
|
|
$purdah1.removeClass('purdah1-animation');
|
|
|
|
}
|
|
|
|
|
|
|
|
if (swiper.activeIndex === 3) {
|
|
|
|
$('.run-men').fadeIn(1000);
|
|
|
|
if (aIndex === 2 || aIndex === 4) {
|
|
|
|
$runMen.hide();
|
|
|
|
}
|
|
|
|
|
|
|
|
if (aIndex === 3 || aIndex === 5) {
|
|
|
|
$videoBox.css({
|
|
|
|
opacity: 0
|
|
|
|
}).removeClass('video-animation');
|
|
|
|
}
|
|
|
|
|
|
|
|
if (aIndex === 4 || aIndex === 6) {
|
|
|
|
$spokesman.removeClass('spokesman-animation');
|
|
|
|
$tB.removeClass('txt-animation');
|
|
|
|
$hand.removeClass('hand-animation');
|
|
|
|
$tW.removeClass('txt-animation');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
...
|
...
|
@@ -49,34 +162,4 @@ $(function() { |
|
|
|
$('.start-btn').on('click', function() {
|
|
|
|
mySwiper.slideTo(1, 1000, true);
|
|
|
|
});
|
|
|
|
|
|
|
|
// $('.purdah1').on('touchstart', function() {
|
|
|
|
// if (parseFloat($nav2Img.css('opacity')) > 0.2) {
|
|
|
|
// return false;
|
|
|
|
// }
|
|
|
|
//
|
|
|
|
// $('.purdah-left').addClass('purdah-l-animation');
|
|
|
|
// $('.purdah-right').addClass('purdah-r-animation');
|
|
|
|
// $('.font-img').addClass('font-img-animation');
|
|
|
|
// $('.hand').addClass('hand-animation');
|
|
|
|
// $('.purdah-area').addClass('black-bg');
|
|
|
|
// $(this).fadeOut(800);
|
|
|
|
//
|
|
|
|
// $('.purdah2').fadeIn(500);
|
|
|
|
// });
|
|
|
|
//
|
|
|
|
// $('.purdah2').on('touchstart', function() {
|
|
|
|
// $(this).fadeOut(800);
|
|
|
|
// $('.purdah3').fadeIn(500);
|
|
|
|
// });
|
|
|
|
//
|
|
|
|
// $('.purdah3').on('touchstart', function() {
|
|
|
|
// $('.purdah4').css({
|
|
|
|
// transition: 'all 1s',
|
|
|
|
// top: 0,
|
|
|
|
// opacity: 1,
|
|
|
|
// zIndex: 6,
|
|
|
|
// display: 'block'
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
}); |
...
|
...
|
|
