onepage_mrhi/tm/template_dir/cutscreen_preview.html

<{include file="header.html"}>
<link rel="stylesheet" type="text/css" href="<{$web_cfg.cdn}>/public/static/css/??swiper.min.css,swiper.animate.min.css" />
<script src="<{$web_cfg.cdn}>/public/static/js/??swiper.jquery.min.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:1%;left:2%;}
.music.right {top:1%;right:2%;}
.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;}
</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">
				<{if $item.background_image}><img class="background_image" style="" src="<{$item.background_image}>" ><{/if}>
				<img class="upper_image ani" style=
				"
				width:<{$item.upper_image.width}>px;
				height:<{$item.upper_image.height}>px;
				<{$item.upper_image.position_style}>
				" 
				<{if $item.move}>
				swiper-animate-effect="<{if $item.move == 'up'}>fadeInUp<{else}>fadeInRight<{/if}>" 
				swiper-animate-duration="0.3s" 
				swiper-animate-delay="0.1s" 
				<{/if}>
				src="<{$item.upper_image.url}>"
				>
				
				<{if $item.button_image.url}>
				<{if $item.button_link}>
				<a href="<{$item.button_link}>">
				<{/if}>
				<img class="button_image" style=
				"
				width: <{$item.button_image.width}>px;
				height: <{$item.button_image.height}>px;
				<{$item.button_image.position_style}>
				" 
				src="<{$item.button_image.url}>" 
				>
				<{if $item.button_link}>
				</a>
				<{/if}>
				<{/if}>
			</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>

<script>
KISSY.use('node, dom, gallery/xplayer/2.1.0/index', function (S, Node, DOM, Xplayer) {
	S.log('image loading start');
	var $ = S.all;
	//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();
					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);
		$(".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();
		}
	});
	<{/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 = new Swiper('.swiper-container', {
		direction : direction // vertical \ horizontal
		, speed: 300
		, onInit: function(swiper){
		    swiperAnimateCache(swiper); 
		    swiperAnimate(swiper); 
		}
		, onSlideChangeEnd: function(swiper){ 
		    swiperAnimate(swiper); 
		}
	});
	
	$(".bottom_arrow").width();
	
});
</script>
</body>
</html>