m-index.html 8.76 KB
<!DOCTYPE html>
<html lang="cn-zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
	<title>fit</title>
	<link rel="stylesheet" href="dist/css/m-style.css">
</head>
<body>
<div class="nav">
    <img class="nav-logo" src="dist/images/m/ios_icon.svg" alt="Fit - 私人健身教练">
    <img class="nav-logo-slogan" src="dist/images/m/fit_subtitle_1.svg" alt="Fit - 私人健身教练">
    <div class="nav-download"><a href="/checkClient.html?f=fit">免费下载</a></div>
</div>
<div class="swiper-container">
    <div class="swiper-wrapper page-height">
        <div class="swiper-slide page1">
        	<div class="logo ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"><img src="dist/images/logo.svg" alt="Fit - 私人健身教练"></div>
        	<div class="logo-slogan ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">私人健身教练</div>
        	<div class="slogan-img ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.6s"><img src="dist/images/slogan.svg" alt="Fit-塑造自己"></div>
        	<div class="download ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.6s"><a href="/checkClient.html?f=fit" class="downloadBtn"><img src="dist/images/m/btn-download.svg" alt="Fit下载"></a></div>
            <div class="next"><img src="dist/images/next.png" alt="下一页"></div>
        </div>
        <div class="swiper-slide page2">
        	<div class="summary">
                <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">丰富 健身课程</h2>
                <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.8s">满足不同需求的人群,</p>
                <p class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.8s">零基础用户也能简单开启健身历程,</p>
                <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.8s">高效达成自己的健身目标。</p>
            </div>
            <ul class="summary-list ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.5s" swiper-animate-delay="1.8s">
                <li><img src="dist/images/weight.svg" alt="减脂"><br><span>减脂</span></li>
                <li><img src="dist/images/shape.svg" alt="塑形"><br><span>塑形</span></li>
                <li><img src="dist/images/strong.svg" alt="增肌"><br><span>增肌</span></li>
            </ul>
        </div>
        <div class="swiper-slide page3">
        	<div class="summary">
                <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">顶尖 健身导师</h2>
                <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.8s">顶级健身导师及团队</p>
                <p class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.8s">精心打造训练课程及健身计划,</p>
                <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.8s">精准示范训练动作,</p>
                <p class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.8s">配备高品质视频呈现。</p>
            </div>
			<div class="coach-container ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
				<div class="swiper-wrapper coach-height">
        			<div class="swiper-slide coach-img">
        				<img src="dist/images/heigarls.jpg" alt="Vanessa Fung" />
        				<div class="coach-info">
        					<h2>Vanessa Fung</h2>
							<p>Fittest Woman in China</p>
							<p>Crossfit培训师</p>
        				</div>
        			</div>
        			<div class="swiper-slide coach-img">
        				<img src="dist/images/overview_index_p3_02_screen_larger.jpg" alt="陈蕴" />
        				<div class="coach-info">
        					<h2>陈蕴</h2>
							<p>OneFit健身学院创始人</p>
							<p>UnderArmour中国唯一签约健身导师</p>
        				</div>
        			</div>
        			<div class="swiper-slide coach-img">
        				<img src="dist/images/chengdan.jpg" alt="程丹" />
        				<div class="coach-info">
        					<h2>程丹</h2>
							<p>红遍全网的“从小胖妞到职业健身教练”</p>
							<p>身体平衡训练、瑜伽教练</p>
        				</div>
        			</div>
        		</div>
			</div>
        </div>
        <div class="swiper-slide page4">
        	<div class="summary">
                <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">记录 训练数据</h2>
                <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.8s">健身打卡,见证你的进阶历程。</p>
                <p class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.8s">有趣的成长体系,</p>
                <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.8s">让训练不再枯燥,</p>
                <p class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.8s">激励自己获取无穷动力。</p>
            </div>
            <ul class="summary-list ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.5s" swiper-animate-delay="1.8s">
                <li><img src="dist/images/history.svg" alt="训练记录"><br><span>训练记录</span></li>
                <li><img src="dist/images/develop.svg" alt="等级成长"><br><span>等级成长</span></li>
                <li><img src="dist/images/badge.svg" alt="专属徽章"><br><span>专属勋章</span></li>
            </ul>
        </div>
        <div class="swiper-slide page5">
        	<ul class="fit-other">
				<li class="wechat ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="0s">
					<div class="wechat-coin">
						<div class="front">
							<img src="dist/images/wechat.svg" alt="微信公众号">
						</div>
						<div class="back">
							<img src="dist/images/m/wechatbside.svg" alt="微信公众号">
						</div>
					</div>
				</li>
				<li class="weibo ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="0.6s">
					<a href="http://weibo.com/fitfitness"><img src="dist/images/weibo.svg" alt="官方微博"></a>
				</li>
				<li class="toutiao ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="1s">
					<a href="http://www.toutiao.com/m6252224496"><img src="dist/images/headline.svg" alt="今日头条"></a>
				</li>
			</ul>
			<div class="mail ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
				<h3>联系我们</h3>
				<ul>
					<li><img src="dist/images/mail.svg" alt="邮箱"><a href="mailto:#">love@fitapp.cn</a></li>
					<li><img src="dist/images/phone.svg" alt="联系电话">021-62939160</li>
				</ul>
			</div>
			<div class="foot ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
				<div class="foot-menu">
					<a href="aboutUs.html" class="aboutus">关于Fit</a>
					<a href="agreement.html" class="agreement">用户协议</a>
					<a href="notice.html" class="notice">注意事项</a>
				</div>
				<div class="copyright"><p>WWW.FITAPP.CN 2016 © All Rights Reserved.</p><p>沪ICP备16009482号</p></div>
			</div>
        </div>
    </div>
</div>
<script src="dist/js/swiper-3.3.1.min.js"></script>
<script src="dist/js/swiper.animate1.0.2.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
	direction : 'vertical',
	onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
		swiperAnimateCache(swiper); //隐藏动画元素 
		swiperAnimate(swiper); //初始化完成开始动画
	}, 
	onSlideChangeEnd: function(swiper){ 
		swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
		if(swiper.activeIndex > 0){
			document.querySelector(".nav").style.top = "0";
		}else{
			document.querySelector(".nav").style.top = "-4rem";
		}
	},

})
var swiper = new Swiper('.coach-container', {
    slidesPerView: 1.5,
    centeredSlides: true,
    paginationClickable: true,
    spaceBetween: 30,
    initialSlide :1,
    loop : true
});   
var wechat = document.querySelector(".wechat");
wechat.onclick = function(){
	this.classList.toggle('hover');  
}
</script>
</body>
</html>