onepage/tm/template_dir/events_cutscreen.html

<{include file="header.html"}>
<{include file="nav.html"}>
<link rel="stylesheet" type="text/css" href="<{$web_cfg.cdn}>/public/static/css/swiper.min.css" />

<link rel="stylesheet" type="text/css" href="<{$web_cfg.cdn}>/public/static/css/swiper.animate.min.css" />
<script src="<{$web_cfg.cdn}>/public/static/js/swiper.jquery.min.js"></script>
<script src="<{$web_cfg.cdn}>/public/static/js/swiper.animate.min.js"></script>

<style>
.swiper-container {width:100%; position:absolute;}
.page-screen {
	background-attachment: scroll;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 320px auto;
}
.background_image {
	display: block;
    overflow: hidden;
    width: 100%;
    z-index: 0;
	position: absolute;
}
.upper_image {
	position: absolute;
}
.button_image {
	position: absolute;
}
@-webkit-keyframes right_start {
	0%,30% {opacity: 0;-webkit-transform: translate(10px, 0) rotate(-90deg);}
	60% {opacity: 1;-webkit-transform: translate(0,0) rotate(-90deg);}
	100% {opacity: 0;-webkit-transform: translate(-8px, 0) rotate(-90deg);}
}
@-moz-keyframes right_start {
	0%,30% {opacity: 0;-moz-transform: translate(10px,0) rotate(-90deg);}
	60% {opacity: 1;-moz-transform: translate(0,0) rotate(-90deg);}
	100% {opacity: 0;-moz-transform: translate(-8px,0) rotate(-90deg);}
}
@keyframes right_start {
	0%,30% {opacity: 0;transform: translate(10px,0) rotate(-90deg);}
	60% {opacity: 1;transform: translate(0,0) rotate(-90deg);}
	100% {opacity: 0;transform: translate(-8px,0) rotate(-90deg);}
}

@-webkit-keyframes botton_start {
	0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
	60% {opacity: 1;-webkit-transform: translate(0,0);}
	100% {opacity: 0;-webkit-transform: translate(0,-8px);}
}
@-moz-keyframes botton_start {
	0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
	60% {opacity: 1;-moz-transform: translate(0,0);}
	100% {opacity: 0;-moz-transform: translate(0,-8px);}
}
@keyframes botton_start {
	0%,30% {opacity: 0;transform: translate(0,10px);}
	60% {opacity: 1;transform: translate(0,0);}
	100% {opacity: 0;transform: translate(0,-8px);}
}

.bottom_arrow {
	width: 20px;
	height: 15px;
	position: absolute;
	z-index: 999;
	bottom: 10px;
	left: 50%;
	animation: botton_start 1.5s infinite ease-in-out;
	-webkit-animation: botton_start 1.5s infinite ease-in-out;
	-moz-animation: botton_start 1.5s infinite ease-in-out;
}
.right_arrow {
	width: 20px;
	height: 15px;
	position: absolute;
	z-index: 999;
	right: 10px;
    top: 50%;
	animation: right_start 1.5s infinite ease-in-out;
	-webkit-animation: right_start 1.5s infinite ease-in-out;
	-moz-animation: right_start 1.5s infinite ease-in-out;
}
.music {
	width: 30px;
	height: 30px;
	overflow: hidden;
	position: fixed;
	z-index: 999;
	background: url("<{$web_cfg.cdn}>/public/static/img/music.png") no-repeat -30px 0px;
	background-size: 60px 30px;
}
.music.left {top:2%;left:3%;}
.music.right {top:2%;right:3%;}
.music.off {background-position: 0px 0px;}
.mask {background-color:<{$cutScreenInfo.loading_bg_color}>;display: block;height: 100%;position: absolute;width: 100%;z-index: 200;}
.loading{position:relative;text-align:center;top:40%; color:<{$cutScreenInfo.loading_text_color}>;}
.loading i{font-size:30px;}
.loading p{font-size: 12px;}
.swiper-slide {overflow: hidden;}
.ks-input {
	position: fixed;
    top: 20%;
    width: 100%;
    z-index: 990;
	display: none;
}
.ks-input .join_submit_box {
	background: #f2f2f4 none repeat scroll 0 0;
    margin: 0 10px;
	padding: 22px 10px 10px;
}
.input-mask {
	background: #000 none repeat scroll 0 0;
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
}
</style>

<div class="mask">
	<div class="loading">
	<i class="fa fa-spinner fa-pulse"></i>
	<p><span>0</span>%</p>
	</div>
</div>

<div class="wrapper jsc-sidebar-content jsc-sidebar-pulled">
	<{if $cutScreenInfo.music_url}>
	<div class="music <{if $cutScreenInfo.music_position == 1}>right<{/if}>"></div>
	<{/if}>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<{foreach from=$pageData item=item}>
			<div class="swiper-slide" style="<{if $item.background_color}>background-color:<{$item.background_color}><{/if}>">
				<{if $item.bgimage_url}><img class="background_image" style="" src="<{$item.bgimage_url}>" ><{/if}>
				
				<{foreach from=$item.layers item=layer}>
					<{if $layer.url}>
						<{if $layer.link}>
						<a href="<{$layer.link}>">
						<{/if}>
						<{if $layer.input_btn}>
						<a class="show_input_btn" href="javascript:;">
						<{/if}>
						<img class="upper_image ani" style=
						"
						width:<{$layer.width}>px;
						height:<{$layer.height}>px;
						<{$layer.style}>
						" 
						<{if $layer.action && $layer.action != 'rest'}>
						swiper-animate-effect="<{if $layer.action == 'up'}>fadeInUp<{else}>fadeInRight<{/if}>" 
						swiper-animate-duration="0.3s" 
						swiper-animate-delay="0.1s" 
						<{/if}>
						src="<{$layer.url}>"
						>
						<{if $layer.input_btn}>
						</a>
						<{/if}>
						<{if $layer.link}>
						</a>
						<{/if}>
					<{/if}>
					
					<{if $layer.video_url}>
						<iframe class="upper_image ani" width=<{$layer.video_width}> height=<{$layer.video_height}> src="<{$layer.video_url}>"
						style="<{$layer.style}>"
						<{if $layer.action && $layer.action != 'rest'}>
						swiper-animate-effect="<{if $layer.action == 'up'}>fadeInUp<{else}>fadeInRight<{/if}>" 
						swiper-animate-duration="0.3s" 
						swiper-animate-delay="0.1s" 
						<{/if}>
						frameborder=0 allowfullscreen></iframe>
					<{/if}>
				<{/foreach}>
			</div>
			<{/foreach}>
		</div>
	</div>
	<{if $cutScreenInfo.cut_fx == 'fadeInUp'}>
	<img class="bottom_arrow" src="<{$web_cfg.cdn}>/public/static/img/arrow.png" >
	<{/if}>
	<{if $cutScreenInfo.cut_fx == 'fadeInRight'}>
	<img class="right_arrow" src="<{$web_cfg.cdn}>/public/static/img/arrow.png" >
	<{/if}>
</div>

<div class="ks-input">
<div class="input-mask"></div>
<div class="v_close_btn hide_input_btn" style="right:10px;"></div>
<{include file="event_forms_template.html"}>
</div>

<!--公用提示背景遮罩层-->
<div class="a_cover"></div>

<div class="v_tips_box v_tips_box2" id="error_tips_box">
    <div class="v_close_btn" id="tips_close_btn"></div>
    <p class="tips_msg" id="error_msg">错误信息</p>    
</div>

<!--活动结束提示+按钮-->
<div class="v_tips_box v_tips_box2" id="try_tips_box">
	<div class="v_close_btn" id="tips_close_btn"></div>
	<p>提交成功！</p>
    <p><a href="javascript:;" class="v2_close_btn submit_btn_style">确认</a></p>
</div>

<script>
KISSY.use('node, dom, io, gallery/xplayer/2.1.0/index', function (S, Node, DOM, IO, Xplayer) {
	S.log('image loading start');
	var $ = S.all, slide;
	//loading
	var waitLoadingImgs = <{$waitLoadingImgs}>,
		hasLoadingTimes = 0, hasLoadingProgress = 0, loadNum = $(".mask p span");
	
	var runId, waitRunData = [];
	
	updateProgress(15, 100, 0);
	
	var avgTime = Math.round(70/waitLoadingImgs.length);
	
	for (var i = 0; i < waitLoadingImgs.length; i++) {
		var oi = new Image();
		oi.src = waitLoadingImgs[i];
		oi.onload = function () {
			++hasLoadingTimes;
			S.log('image loading ok');
			updateProgress(avgTime, 100, 0);
		};
	}
	var ID = setInterval(function () {
		if (hasLoadingTimes == waitLoadingImgs.length) {
			clearInterval(ID);
			updateProgress(15, 1000, 1);
			S.log('image loading done');
		}
		
	}, 10);
	
	function updateProgress(num, time, isDone) {
		waitRunData.push(num+'-'+time+'-'+isDone);
	}
	
	runQueue();
	
	function runQueue() {
		if (runId > 0) clearInterval(runId);
		
		var time = 0, addnum = 0, tmpnum = 1;
		
		var rundata = waitRunData.shift();
		if (S.isUndefined(rundata)) {
			rundata = '';
		}
		
		rundata = rundata.split('-');
		addnum = rundata[0];
		time = rundata[1];
		isDone = rundata[2];
		var millisec = time/addnum;
		
		runId = setInterval(function () {
			if (tmpnum > addnum) {
				if (isDone == 1) {
					clearInterval(runId);
					loadNum.html(100);
					//
					jQuery(".mask").fadeOut();
					swiperInit();
					return false;
				}
				
				//S.log('runqueue');
				runQueue();
				return;
			}
			++tmpnum;
			++hasLoadingProgress;
			if (hasLoadingProgress > 100) hasLoadingProgress = 100;
			loadNum.html(hasLoadingProgress);
		}, millisec);
	}
	
	//20s
	setTimeout(function () {
		clearInterval(runId);
		loadNum.html(100);
		swiperInit();
		$(".mask").fadeOut();
	}, 15000);
	
	
	<{if $cutScreenInfo.music_url}>
	var XiamiPlay = new Xplayer({"autoplay": false});
	XiamiPlay.load({
	    'url' : '<{$cutScreenInfo.music_url}>',
	});
	XiamiPlay.play();
	
	$(".music").on('click', function () {
		if ($(this).hasClass('off')) {
			$(this).removeClass('off');
			XiamiPlay.play();
		} else {
			$(this).addClass('off');
			XiamiPlay.pause();
		}
	});
	
	XiamiPlay.on("ended", function(e) {
		XiamiPlay.play();
	});
	<{/if}>
	
	var screenHeight = $(window).height();
	var headerHeight = $(".wrapper-header").height();
	$(".swiper-container").height(screenHeight - headerHeight);
	
	<{if $cutScreenInfo.cut_fx == 'fadeInRight'}>
	var direction = 'horizontal';
	<{else}>
	var direction = 'vertical';
	<{/if}>
	var swiper_params = {
		direction : direction // vertical \ horizontal
		, speed: 300
		, onInit: function(swiper){
		    swiperAnimateCache(swiper); 
		    swiperAnimate(swiper); 
		}
		, onSlideChangeEnd: function(swiper){
			swiperAnimate(swiper); 
			if (swiper.isEnd) {
				$('.bottom_arrow, right_arrow').hide();
			} else {
				$('.bottom_arrow, right_arrow').show();
			}
		}
	};
	
	var isSwiper = false;
	function swiperInit () {
		if (!isSwiper) {
			var swiper = new Swiper('.swiper-container', swiper_params);//start swiper
			isSwiper = true;
			slide = $(swiper.slides[swiper.activeIndex]);
		}
	}
	
	$(".bottom_arrow").width();
	
	
	function showErrorMsgBox(msg){
		$(".v_tips_box").fadeOut();
		$("#error_msg").html(msg);
		$("#error_tips_box").show();
		
	}
	
	$(".v_close_btn,.v2_close_btn").on('click', function(){
		$(".v_tips_box,.a_cover").hide();
	});
	IO.on("send",function(){
		showErrorMsg('<i class="fa fa-spinner fa-pulse"></i>');
		$('.a_cover').fadeIn();
	});
	$('#common_submit_btn', slide).on('click', function () {
		var formData = IO.serialize('#ff');
		IO.post('<{$web_cfg.domain}>/?c=EventsCutScreen&a=SubmitForm&events_id=<{$cutScreenInfo.id}>'
			, formData
			, function (data) {
				if (data.ok) {
					showOkMsg();
					$(".ks-input").fadeOut(.3);
				} else {
					showErrorMsg(data.msg);
				}
			}
			, 'json'
		);
		return false;
	});
	
	$(".show_input_btn").on('click', function () {
		$(".ks-input").fadeIn(.3);
	});
	
	$(".hide_input_btn").on('click', function () {
		$(".ks-input").fadeOut(.3);
	});
});

function showOkMsg(){
	$('.a_cover').fadeIn(200);
	$('#try_tips_box').fadeIn(200);
}
function showErrorMsg(data_msg){
	$('#tips_close_btn').show();
	$('#error_msg').html(data_msg);
	$('#error_tips_box').fadeIn(200);
	$('.a_cover').fadeIn(200);
}
</script>
<{include file="bottom.html"}>