$(function(){
$("#fullpage").fullpage({
verticalCentered:false,
anchor:['page1','page2','page3','page4'],
navigation:true,
navigationTooltips:['特终于来了。','智能时代来到每个人的身边','真正贴近每个人的设备','不同特点，找到适合你的风格'],
afterLoad:function(link,index){
switch(index){
case 1:
move('.section1 h1').scale(1.5).end();
move('.section1 p').set('margin-top','5%').end();
break;
case 2:
move('.section2 h1').scale(0.7).end();
break;
case 3:
break;
case 4:
break;
default:
break;
}
},
2015-10-15
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<title>
苹果表广告
</title>
<link href="jquery.fullPage.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="fullPage">
<div class="section section1">
<h1>它，终于来了</h1>
<p>为了充分发挥体积小巧以及佩戴于手腕的优势，Apple Watch带来全新的科技和互动方式。它可以让你更快便捷的完成一些早已习惯的事，也可实现
过去根本无法企及的新功能。因此，这将会是焕然一新的使用体验，也将实现与你前所未有的贴近。
</p>
<a href="#">进一步了解</a>
</div>
<div class="section section2">
<h1>真正与你贴近的个人设备</h1>
<a href="#">进一步了解</a>
</div>
<div class="section section3">
<h1>非同一般的精准计时</h1>
<p>高级手表向来以精准计时为本，Apple Watch更是如此，它与你的iphone配合使用，同全球的标准时差不超过50毫秒，
而且，你可以对表盘进行个性化设置，以更具个性和意义的方式显示时间，使其更贴合你的生活要求。
</p>
<a href="#">进一步了解计时</a>
</div>
<div class="section section4">
<h1>在三个特点鲜明的系列中找到你的风格</h1>
<div class="row">
<div class="column">
<img src="./img/primary_large_2x.jpg" class="primary">
<h4 class="primary"></h4>
<div class="intro">
<p>不锈钢或深空黑色不锈钢表壳，蓝宝石水晶镜面，搭配多款时尚表带。</p>
<a href="#" class="more">了解更多</a>
</div>
</div>
<div class="column">
<img src="./img/sport_large_2x.jpg" class="sport">
<h4 class="sport"></h4>
<div class="intro">
<p>银色或深空灰色的金属氧化铝表壳，蔷花I-onx玻璃，搭配亮色柔韧的表带</p>
<a href="#"class="more">了解更多</a>
</div>
</div>
<div class="column">
<img src="./img/edition_large_2x.jpg" class="edition">
<h4 class="edition"></h4>
<div class="intro">
<p>黄金或玫瑰金表壳，蓝宝石水晶镜面，搭配精雕细琢的表带和表扣。</p>
<a href="#"class="more">了解更多</a>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.fullPage.js" type="text/javascript"></script>
<script src="move.js" type="text/javascript"> </script>
<script type="text/javascript">
$(function(){
$("#fullPage").fullpage({
verticalCentered:false,
anchors:['page1','page2','page3','page4'],
navigation:true,
navigationTooltips:['它，终于来了。','真正与你贴近的个人设备','非同一般的精准计时','在三个特点鲜明的系列中找到你的风格'],
afterLoad:function(link,index){
switch(index){
case 1:
move('.section1 h1').scale(1.5).end();
move('.section1 p').set('margin-top','%5').end();
break;
case 2:
move('.section2 h1').scale(0.7).end();
break;
case 3:
move('.section3 h1').set('margin-left','%20').end();
move('.section3 p').set('margin-left','%20').end();
break;
case 4:
move('.section4 img.primary').rotate(360).end(function(){
move('.section4 img.sport').rotate(360).end(function(){
move('.section4 img.edition').rotate(360).end(function(){
move('.section4 h4.primary').scale(1.3).end(function(){
move('.section4 h4.sport').scale(1.3).end(function(){
move('.section4 h4.edition').scale(1.3).end();
});
});
});
});
});
break;
default:
break;
}
},
onLeave:function(link,index){
switch(index){
case 1:
move('.section1 h1').scale(1).end();
move('.section1 p').set('margin-top','800px').end();
break;
case 2:
move('.section2 h1').scale(1).end();
break;
case 3:
move('.section3 h1').set('margin-left','-1500px').end();
move('.section3 p').set('margin-left','1500px').end();
break;
case 4:
move('.section4 img.primary').rotate(-360).end();
move('.section4 img.sport').rotate(-360).end();
move('.section4 img.edition').rotate(-360).end();
move('.section4 h4.primary').scale(1).end();
move('.section4 h4.sport').scale(1).end();
move('.section4 h4.edition').scale(1).end();
break;
default:
break;
}
},
afterRender:function(){
},
});
});
</script>
</body>
</html>举报
