话说一直很喜欢一页滚动的那种页面啊= =感觉好棒
下面来说说fullPage.js这个插件 网址：http://alvarotrigo.com/fullPage/ 我也就按照那个demo来做一遍而已~
可以自己下载看看说明吧。
http://fullpagestudy.sinaapp.com/
案例demo2 < _ < 这个花了我最久时间
PS 补充下~下面是最简单的最初始的demo，在后面还做了很多的修改，例如翻页的效果，还有加载页面时候元素的飞入以及移除页面时候元素的飞出等等效果~
这就考虑到后面说的那几个fullpage里面的方法：
onLeave: function(index, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction){}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>fullPage</title>
<link rel="stylesheet" type="text/css" href="../jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="mypage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery.fullPage.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('fullpage').fullpage({
slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
menu: '#menu'
});
});
</script>
</head>
<body>
<ul id="menu">
<li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
<li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
<li data-menuanchor="4thpage"><a href="#4thpage">Fourth slide</a></li>
</ul>
<div id="fullpage">
<div class="section " id="section0">
<h1>fullPage.js</h1>
<p>Create Beautiful Fullscreen Scrolling Websites</p>
<img src="imgs/fullPage.png" alt="fullPage" />
</div>
<div class="section" id="section1">
<div class="slide">
<div class="intro">
<h1>Create Sliders</h1>
<p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
<img src="imgs/slider.png" alt="slider" />
</div>
</div>
<div class="slide">
<div class="intro">
<img src="imgs/1.png" alt="simple" />
<h1>Simple</h1>
<p>Easy to use. Configurable and customizable.</p>
</div>
</div>
<div class="slide">
<div class="intro">
<img src="imgs/2.png" alt="Cool" />
<h1>Cool</h1>
<p>It just looks cool. Impress everybody with a simple and modern web design!</p>
</div>
</div>
<div class="slide">
<div class="intro">
<img src="imgs/3.png" alt="Compatible" />
<h1>Compatible</h1>
<p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Example</h1>
<p>HTML markup example to define 4 sections.</p>
<img src="imgs/example2.png" alt="example" />
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Working On Tablets</h1>
<p>
Designed to fit to different screen sizes as well as tablet and mobile devices.
<br /><br /><br /><br /><br /><br />
</p>
</div>
<img src="imgs/tablets.png" alt="tablets" />
</div>
</div>
</body>
</html>
嗯哼，上面很简单的html布局，我们用div来包裹整个文件，然后里面需要class="section"的部分
大体的结果就是
<div id="fullpage">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>然后里面就可以放自己想要放的东西啦，没什么好说的
另外在开头部分我们也放了导航条
<ul id="menu">
<li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
<li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
<li data-menuanchor="4thpage"><a href="#4thpage">Fourth slide</a></li>
</ul>这个部分是用来定义导航的，关于data的可以到http://ejohn.org/blog/html-5-data-attributes/看看，自定义的属性吧~
唉，接下来就可以弄我们的js了
<script type="text/javascript">
$(document).ready(function(){
$('fullpage').fullpage({
slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
menu: '#menu'
});
});
</script>
而下面的就是通过json格式来分别设定了slidesColor，每个页面的颜色 anchors 这个就是对应于data-menuanchor的属性了 最后的menu属性就是对于导航的id属性
到这里我们基本就搞定了可以翻滚的页面了，最核心但是不麻烦的地方就搞定了啦。
fullpage里面的属性真的好多，还有函数，具体可以下载这个框架，然后查看里面的readme进一步学习咯。下面先来预览下：
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: true,
resize : true,
slidesColor : ['#ccc', '#fff'],
anchors:['firstSlide', 'secondSlide'],
scrollingSpeed: 700,
easing: 'easeInQuart',
menu: false,
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
slidesNavigation: true,
slidesNavPosition: 'bottom',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
autoScrolling: true,
scrollOverflow: false,
css3: false,
paddingTop: '3em',
paddingBottom: '10px',
fixedElements: '#element1, .element2',
normalScrollElements: '#element1, .element2',
keyboardScrolling: true,
touchSensitivity: 15,
continuousVertical: false,
animateAnchor: true,
//events
onLeave: function(index, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction){}
});
});接下来我们来设置设置下样式
前面这部分算是reset.css的吧~热下身~熟悉的话可以无视掉
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
a{
text-decoration:none;
}
table{
border-spacing:0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
strong{
font-weight: bold;
}
ol,ul {
list-style: none;
margin:0;
padding:0;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
margin:0;
padding:0;
color:#444;
}
q:before,q:after {
content:'';
}
abbr,acronym {
border: 0;
}
呐，接下来给出针对这个案例的css（刚csdn博客挂了摔！
body{
font-family: arial,helvetica;
color: #333;
color: rgba(0,0,0,0.5);
}
h1{
font-size:6em;
}
p{
font-size:2em;
}
.intro p{
width:50%;
margin:0 auto;
font-size:1.5em;
}
.section{
text-align:center;
}
#menu{
position:fixed;
top:0;
left:0;
z-index:70;
height:0;
width:100%;
padding:0;
margin:0;
}
#menu li{
display:inline-block;
margin:10px;
color:#000;
background:#fff;
background:rgba(255,255,255,0.5);
-webkit-border-radius:10px;
border-radius:10px;
-webkit-transition: all 0.2s ease-in;
-moz-transition:all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
#menu li.active{
background:#666;
background:rgba(0,0,0,0.5);
color:#fff;
}
#menu li a{
text-decoration:none;
color:#000;
-webkit-transition: all 0.2s ease-in;
-moz-transition:all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
#menu li.active a:hover{
color: #000;
}
#menu li:hover{
background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
padding: 9px 18px;
display:block;
}
#menu li.active a{
color: #fff;
}Understanding CSS3 Transitions http://alistapart.com/article/understanding-css3-transitions
最后再改改图片的位置，没什么好说的啦，案例就到这里了
<style type="text/css">
#section0 img,
#section1 img{
margin: 20px 0 0 0;
}
#section2 img{
margin: 20px 0 0 52px;
}
#section3 img{
bottom: 0px;
position: absolute;
margin-left: -420px;
}
.intro p{
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
</style>对了，最后说说那个滑动的吧
<div class="section">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>也是很简单的啦~
然后最后也在fullPage里面加入了
loopBottom:true,
loopTop:true
这样就可以循环了~~
231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
