继续学习
2015-07-14 00:00
253 查看
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<style>
body{color:#333;font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif}
h1{font-size:5em;font-family:arial,helvetica;margin:0;padding:0}
h2{font-size:2em;margin:0 0 18px 0;font-family:arial,helvetica}
img{-webkit-transition:all 0.7s ease-out;-moz-transition:all 0.7s ease-out;-o-transition:all 0.7s ease-out;transition:all 0.7s ease-out}
.section{text-align:center;overflow:hidden}
.wrap{width:1180px;height:100%;margin-left:auto;margin-right:auto;position:relative}
.box{text-align:left;color:#808080;font-size:1.2em;line-height:1.6em}
#section0{padding:60px 0}
#section0 img{height:100%;margin:40px 0 0 0}
#section1 img{position:absolute;left:40px;top:100px}
#section1 .box{position:absolute;top:50%;left:50%;margin-top:-192px;margin-left:89px;width:395px;z-index:1}
#section1 .imgsContainer{display:block;position:absolute;z-index:1;top:42%;left:58%;margin-top:-325px;margin-left:-747px;width:800px;height:696px}
#section1 img{height:100%}
@media all and (min-width:620px) and (max-width:800px){#section1 .imgsContainer{margin-top:-278px;margin-left:-685px;width:647px;height:563px}
}@media all and (max-width:620px){#section1 .imgsContainer{margin-top:-208px;margin-left:-516px;width:534px;height:464px}
}#iphone2{z-index:10}
#iphone2.active{-webkit-transform:translate3d(-134px,0px,0px);-moz-transform:translate3d(-134px,0px,0px);-ms-transform:translate3d(-134px,0px,0px);transform:translate3d(-134px,0px,0px)}
#iphone3{z-index:12}
#iphone3.active{-webkit-transform:translate3d(213px,0px,0px);-moz-transform:translate3d(213px,0px,0px);-ms-transform:translate3d(213px,0px,0px);transform:translate3d(213px,0px,0px)}
#iphone4{z-index:11;left:140px}
#iphone4.active{-webkit-transform:translate3d(548px,0px,0px);-moz-transform:translate3d(548px,0px,0px);-ms-transform:translate3d(548px,0px,0px);transform:translate3d(548px,0px,0px)}
#section2 img{position:absolute}
#section2 .imgsContainer,#staticImg .imgsContainer,#section3 .imgsContainer{position:absolute;z-index:1;left:50%;display:block;margin-top:-288px;margin-left:-636px;width:0;height:0;-webkit-transition:all 1.2s ease-in-out;-moz-transition:all 1.2s ease-in-out;-o-transition:all 1.2s ease-in-out;transition:all 1.2s ease-in-out}
#section2.moveUp .imgsContainer{top:50%}
#section2.moveDown .imgsContainer,#staticImg .imgsContainer{top:90%}
#section2.active .imgsContainer{top:50%}
#section2 .box{top:22%;left:42%;position:absolute;width:582px}
#iphone-yellow{top:-35px;left:-222px}
#iphone-red{top:-194px;left:106px}
#iphone-blue{top:320px;left:448px}
#iphone-green{left:106px;position:absolute}
#staticImg{display:block;position:absolute;z-index:1;top:200%;left:0;width:100%;min-width:980px;height:100%;-webkit-transition:all 0.7s ease-out;-moz-transition:all 0.7s ease-out;-o-transition:all
7fe0
0.7s ease-out;transition:all 0.7s ease-out}
#staticImg.moveDown{top:300%}
#staticImg.moveDown .imgsContainer{top:50%}
#staticImg.moveDown img{top:155px}
#staticImg.active .imgsContainer{top:50%}
#staticImg.active img{top:487px}
#section3 .imgsContainer{top:50%}
#section3 img{top:155px;left:455px;position:absolute}
#section3 .box{text-align:center;margin:10% 0 0 0}
#infoMenu.whiteLinks li:nth-child(1) a,#infoMenu.whiteLinks li:nth-child(2) a,#infoMenu.whiteLinks li:nth-child(3) a{color:#fff}
#infoMenu{font-family:arial,helvetica}
.fullPage-tooltip{color:#AAA}
#fullPage-nav span,.fullPage-slidesNav span{border-color:#AAA}
#fullPage-nav li .active span,.fullPage-slidesNav .active span{background:#AAA}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui-1.10.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.fn.fullpage({
'verticalCentered': false,
'anchors': ['page1', 'page2', 'page3', 'page4'],
'css3': true,
'slidesColor': ['#F0F2F4', '#fff', '#fff', '#fff'],
'navigation': true,
'navigationPosition': 'right',
'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],
'afterLoad': function(anchorLink, index){
if(index == 2){
$('#iphone3, #iphone2, #iphone4').addClass('active');
}
$('#infoMenu').toggleClass('whiteLinks', index ==4);
},
'onLeave': function(index, direction){
if (index == 3 && direction == 'down'){
$('.section').eq(index -1).removeClass('moveDown').addClass('moveUp');
}
else if(index == 3 && direction == 'up'){
$('.section').eq(index -1).removeClass('moveUp').addClass('moveDown');
}
$('#staticImg').toggleClass('active', (index == 2 && direction == 'down' ) || (index == 4 && direction == 'up'));
$('#staticImg').toggleClass('moveDown', index == 3 && direction == 'down');
},
afterRender: function(){
$('#infoMenu').appendTo('body');
$('#githubLink, .twitter-share-button').appendTo('body');
}
});
});
</script>
</head>
<body>
<div id="staticImg">
<div class="imgsContainer">
<img src="images/iphone-green.png" alt="iphone" id="iphone-green" />
</div>
</div>
<div class="section " id="section0">
<h1>fullPage.js — iPhone 5C演示</h1>
<img src="images/iphone1.jpg" alt="iphone" />
</div>
<div class="section" id="section1">
<div class="wrap">
<div class="imgsContainer">
<img src="images/iphone2.png" alt="iphone" id="iphone2" />
<img src="images/iphone3.png" alt="iphone" id="iphone3" />
<img src="images/iphone4.png" alt="iphone" id="iphone4" />
</div>
<div class="box">
<h2>A powerful plugin</h2>
<strong>fullPage.js</strong> callbacks allow you to create amazing dynamic sites with a bit of imagination. This example tries to reproduce the Apple iPhone-5c website animations as an example of what fullPage.js is capable of.
</div>
</div>
</div>
<div class="section moveDown" id="section2">
<div class="wrap">
<div class="imgsContainer">
<img src="images/iphone-yellow.png" alt="iphone" id="iphone-yellow" />
<img src="images/iphone-red.png" alt="iphone" id="iphone-red" />
<img src="images/iphone-blue.png" alt="iphone" id="iphone-blue" />
</div>
<div class="box">
<h2>Amazing stuff</h2>
Combining <strong>fullPage.js</strong> with your own CSS styles and animations, you will be able to create something remarkable.
</div>
</div>
</div>
<div class="section moveDown" id="section3">
<div class="wrap">
<div class="box">
<h2>Just a demo</h2>
This is, of course, just a demo. I didn't want to spend much time on it.
Don't expect it to work perfectly in all kind of screens.
It has been designed to work on 1180px width or over on modern browsers with CSS3.
</div>
</div>
<div class="imgsContainer">
<img src="images/iphone-two.png" alt="iphone" id="iphone-two" />
</div>
</div>
<a href="xx.html" style="display: none;">dowebok</a>
<a href="xx.html" style="display: none;">jQuery全屏滚动</a>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- continue
- linux环境下jboss配置
- 操作笔记：catalina.out膨胀太快，分割tomcat 7日志
- 用BarTender还不知道图层？
- 乱斗西游中获得英雄碎片的途径有哪些
- Parameter number X is not an OUT parameter
- 如何在几何画板中构造正五边形
- Java设计模式原则
- Jenkins Failed to archive test report
- 腾讯SNG 7月25日——开发类专场招聘会
- mvc的学习
- git 命令大全
- Leetcode #40 Combination Sum II
- linux下串口编程简单实例
- STM32串口多机通信
- web deploy 部署到远程服务器(win server 2008 r2) 遇到的问题。。。。
- 学游戏开发，就是这么牛！
- 三伏天要如何防中暑
- ubutun14伪分布安装hadoop-2.6.0
- JSONArray的合并