内容来自：颜海镜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
/*global.css*/
.wp{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.page{
font-size: 72px;
line-height: 320px;
text-align: center;
}
.page1{
background: red;
}
.page2{
background: yellow;
}
.page3{
background: maroon;
}
.page4{
background: green;
}
/* 箭头 */
/*@-webkit-keyframes start {
0%,30% {
opacity: 0.2;
-webkit-transform: translate(0,10px);
}
60% {
opacity: 1;
-webkit-transform: translate(0,0);
}
100% {
opacity: 0.2;
-webkit-transform: translate(0, -5px);
}
}
@keyframes start {
0%,30% {
opacity: 0.2;
transform: translate(0,10px);
}
60% {
opacity: 1;
transform: translate(0,0);
}
100% {
opacity: 0.2;
transform: translate(0, -5px);
}
}*/
@-webkit-keyframes start{
from{
opacity: 1;
}
to{
-webkit-transform:translate(-100%);
opacity: 0;
}
}
@keyframes start{
from{
opacity: 1;
}
to{
transform:translateY(-100%);
opacity: 0;
}
}
.start{
position: fixed;
top: 95%;
left: 50%;
margin-left: -17px;
margin-top: -34px;
width: 34px;
height: 34px;
}
.start b{
position: absolute;
top: 10px;
left: 50%;
margin-left: -9px;
width: 19px;
height: 12px;
background: url(img/arrow.png);
background-size: 100% 100%;
-webkit-animation: start 1.5s ease infinite;
animation: start 1.5s ease infinite;
}
/*fullpage.css*/
.fullPage-wp{
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.fullPage-wp:after {
display: block;
content: ‘ ‘;
height: 0;
clear: both;
}
.fullPage-wp.anim{
-webkit-transition: all 500ms ease-out 0s;
transition: all 500ms ease-out 0s;
}
.fullPage-page{
display: block;
overflow: hidden;
}
.fullPage-dir-h {
float: left;
}
/*this page css*/
[data-dir]{
position: absolute;
z-index: 9999;
}
[data-dir]:nth-child(1){
top: 100px;
right: 0;
}
[data-dir]:nth-child(2){
top: 140px;
right: 0;
}
.indicator{
position: fixed;
right: 10px;
top: 50%;
margin-top: -40px;
}
.indicator li{
margin-top: 10px;
width: 10px;
height: 10px;
border-radius: 100px;
background: rgba(0,0,0,0.5);
text-indent: -9999px;
list-style: none;
}
.indicator li.cur{
background: rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<div class="wp">
<a href="" id="prev" data-dir="movePrev">向前</a>
<a href="" id="next" data-dir="moveNext">向后</a>
<div class="wp-inner">
<div class="page page1">1</div>
<div class="page page2">2</div>
<div class="page page3">3</div>
<div class="page page4">4</div>
</div>
<ul class="indicator">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<span class="start"><b></b></span>
<script src="js/zepto.min.js"></script>
<script src="js/zepto.fullpage.js"></script>
<script>
$(‘.wp-inner‘).fullpage({
page: ‘.page‘,
start: 0,
duration: 500,
drag: false,
loop: false,
dir: ‘v‘,
der:0.1,//当滑动距离大于一个值时，才会引起滑动现象，滑动距离=der*屏幕高度|宽度
change: function (e) {
console.log(‘change‘, e.next, e.cur);
$(‘.indicator li‘).removeClass(‘cur‘).eq(e.cur).addClass(‘cur‘);
},
beforeChange: function (e) {
console.log(‘beforeChange‘, e.next, e.cur);
},
afterChange: function (e) {
console.log(‘afterChange‘, e.next, e.cur);
},
orientationchange: function () {}
});
$("#prev,#next").on(‘click‘,function(e){
e.preventDefault();
$.fn.fullpage[$(this).data(‘dir‘)](true);
});
// update:此方法会重新计算和渲染每屏的高度，当你发现如果每屏的高度有问题时，手动调用下此方法就可以了。
// moveTo:切换到指定屏，如果指定的屏数大于屏总数或小于0，都会做修正处理。
// movePrev:向前一屏，是对moveTo的封装。
// moveNext:向后一屏，是对moveTo的封装。
// start:开启切换功能，和stop配合使用。丰富页面功能，比如到了某页需要点击某个元素后才能到下一页的时候 这个就有用了～～
// stop:关闭切换功能，和start配合使用。
// getCurIndex:获取当前位于第几屏的方法。
</script>
</body>
</html>
时间： 2024-10-13 17:01:42