fullPage 实现全屏滚动

其他 2019-02-21 16:01:18 阅读次数: 0

参考demo网址：
http://www.dowebok.com/demo/2014/77/

api说明地址：
http://www.dowebok.com/77.html

一、基础演示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>fullPage.js — 基本演示_dowebok</title>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script>
$(function(){
	$('#dowebok').fullpage({
		sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
	});
});
</script>
</head>

<body>

<div id="dowebok">
	<div class="section">
		<h3>第一屏</h3>
		<p>fullPage.js — 基本演示</p>
	</div>
	<div class="section">
		<div class="slide"><h3>第二屏的第一屏</h3></div>
		<div class="slide"><h3>第二屏的第二屏</h3></div>
		<div class="slide"><h3>第二屏的第三屏</h3></div>
	</div>
	<div class="section">
		<h3>第三屏</h3>
	</div>
	<div class="section">
		<h3>第四屏</h3>
		<p>这是最后一屏</p>
	</div>
</div>

</body>
</html>

二、背景演示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>fullPage.js — 背景演示_dowebok</title>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<style>
.section1 { background: url(images/1.jpg) 50%;}
.section2 { background: url(images/2.jpg) 50%;}
.section3 { background: url(images/3.jpg) 50%;}
.section4 { background: url(images/4.jpg) 50%;}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script>
$(function(){
	$('#dowebok').fullpage();
});
</script>
</head>

<body>

<div id="dowebok">
	<div class="section section1"></div>
	<div class="section section2"></div>
	<div class="section section3"></div>
	<div class="section section4"></div>
</div>

</body>
</html>

三、循环滚动。回调函数演示。增加动画效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>fullPage.js — 回调函数演示_dowebok</title>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
.section2 p { position: relative; left: -120%;}
.section3 p { position: relative; bottom: -120%;}
.section4 p { display: none;}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="http://cdn.staticfile.org/jquery-easing/1.3/jquery.easing.min.js"></script>
<script>
$(function(){
	$('#dowebok').fullpage({
		sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
        continuousVertical: true , //滚动到第四屏后，继续滚动返回第一屏
		afterLoad: function(anchorLink, index){
			if(index == 2){
				$('.section2').find('p').delay(500).animate({
					left: '0'
				}, 1500, 'easeOutExpo');
			}
			if(index == 3){
				$('.section3').find('p').delay(500).animate({
					bottom: '0'
				}, 1500, 'easeOutExpo');
			}
			if(index == 4){
				$('.section4').find('p').fadeIn(2000);
			}
		},
		onLeave: function(index, direction){
			if(index == '2'){
				$('.section2').find('p').delay(500).animate({
					left: '-120%'
				}, 1500, 'easeOutExpo');
			}
			if(index == '3'){
				$('.section3').find('p').delay(500).animate({
					bottom: '-120%'
				}, 1500, 'easeOutExpo');
			}
			if(index == '4'){
				$('.section4').find('p').fadeOut(2000);
			}
		}
	});
});
</script>
</head>

<body>

<div id="dowebok">
	<div class="section section1">
		<h3>第一屏</h3>
		<p>fullPage.js — 回调函数演示</p>
	</div>
	<div class="section section2">
		<h3>第二屏</h3>
		<p>滚动到第二屏后的回调函数执行的效果</p>
	</div>
	<div class="section section3">
		<h3>第三屏</h3>
		<p>滚动到第三屏后的回调函数执行的效果</p>
	</div>
	<div class="section section4">
		<h3>第四屏</h3>
		<p>滚动到第四屏后的回调函数执行的效果</p>
	</div>
</div>

</body>
</html>

四、绑定菜单演示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>fullPage.js — 绑定菜单演示_dowebok</title>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<style>
#menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;}
#menu li { float: left; margin:  0 10px 0 0; font-size: 14px;}
#menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;}
#menu .active a { color: #fff; background-color: #333;}
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script>
$(function(){
	$('#dowebok').fullpage({
		sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
		anchors: ['page1', 'page2', 'page3', 'page4'],
		menu: '#menu'
	});
});
</script>
</head>

<body>

<ul id="menu">
	<li data-menuanchor="page1" class="active"><a href="#page1">第一屏</a></li>
	<li data-menuanchor="page2"><a href="#page2">第二屏</a></li>
	<li data-menuanchor="page3"><a href="#page3">第三屏</a></li>
	<li data-menuanchor="page4"><a href="#page4">第四屏</a></li>
</ul>

<div id="dowebok">
	<div class="section">
		<h3>第一屏</h3>
		<p>fullPage.js — 绑定菜单演示</p>
	</div>
	<div class="section">
		<h3>第二屏</h3>
		<p>请查看左上角，点击可以控制</p>
	</div>
	<div class="section">
		<h3>第三屏</h3>
		<p>绑定的菜单没有默认的样式，你需要自行编写</p>
	</div>
	<div class="section">
		<h3>第四屏</h3>
		<p>这是最后一屏</p>
	</div>
</div>

</body>
</html>

菜单绑定
五、自动滚动。项目导航。循环滚动(moveSectionDown)，纵向循环。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>fullPage.js演示-自动滚动_dowebok</title>
 <link rel="stylesheet" href="css/jquery.fullPage.css">
 <style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>
</head>

<body>
<div id="dowebok">
    <div class="section">
        <h3>第一屏</h3>
    </div>
    <div class="section">
        <h3>第二屏</h3>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
    </div>
</div>

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script>
$(function(){
    $('#dowebok').fullpage({
        sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
        continuousVertical: true, //循环滚动
        'navigation': true, //项目导航，侧边圆点
    });

    setInterval(function(){
        $.fn.fullpage.moveSectionDown();
    }, 3000);
});
</script>

</body>
</html>

六、自动滚动 (moveSlideRight)，第二屏横向循环。滚动到底部后，是否滚回顶部。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="utf-8">
<title>fullPage.js演示-slide自动滚动_dowebok</title>
 <link rel="stylesheet" href="css/jquery.fullPage.css">
 <style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>
</head>

<body>
<div id="dowebok">
    <div class="section">
        <h3>第一屏</h3>
        <p>请滚动到第二屏查看</p>
    </div>
    <div class="section">
        <div class="slide"><h3>第二屏的第一屏</h3></div>
        <div class="slide"><h3>第二屏的第二屏</h3></div>
        <div class="slide"><h3>第二屏的第三屏</h3></div>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
    </div>
</div>

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script>
$(function(){
    $('#dowebok').fullpage({
        sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
        loopBottom: true  //滚动到最底部后是否滚回顶部
    });

    setInterval(function(){
        $.fn.fullpage.moveSlideRight();
    }, 3000);
});
</script>

</body>
</html>

七、响应式(屏幕宽度小于1024关闭全屏滚动，改为自带滚动条)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
<title>fullPage.js演示-响应式_dowebok</title>
 <link rel="stylesheet" href="css/jquery.fullPage.css">
 <style>
.section { text-align: center; font: 30px "Microsoft Yahei"; color: #fff;}
</style>
</head>

<body>
<div id="dowebok">
    <div class="section">
        <p>根据可视区域大小启用/关闭全屏滚动效果</p>
    </div>
    <div class="section">
        <p>如果可视区宽度小于1024，则关闭全屏滚动效果，使用自带的滚动条</p>
    </div>
    <div class="section">
        <p>请试着调整浏览器大小并查看滚动条是否出现</p>
    </div>
    <div class="section">
        <p>第四屏</p>
    </div>
</div>

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script>
$(function(){
    $('#dowebok').fullpage({
        sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
    });

    $(window).resize(function(){
        autoScrolling();
    });

    function autoScrolling(){
        var $ww = $(window).width();
        if($ww < 1024){
            $.fn.fullpage.setAutoScrolling(false);
        } else {
            $.fn.fullpage.setAutoScrolling(true);
        }
    }

    autoScrolling();
});
</script>

</body>
</html>

八、 iPhone 5C演示。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>fullPage.js — iPhone 5C演示_dowebok</title>
<link rel="stylesheet" href="http://www.dowebok.com/demo/2014/77/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 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="http://cdn.staticfile.org/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://www.dowebok.com/demo/2014/77/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="http://idowebok.u.qiniudn.com/77/iphone-green.png" alt="iphone" id="iphone-green" />
	</div>
</div>

<div class="section " id="section0">
	<h1>fullPage.js — iPhone 5C演示</h1>
	<img src="http://idowebok.u.qiniudn.com/77/iphone1.jpg" alt="iphone" />
</div>

<div class="section" id="section1">
	<div class="wrap">
		<div class="imgsContainer">
			<img src="http://idowebok.u.qiniudn.com/77/iphone2.png" alt="iphone" id="iphone2" />
			<img src="http://idowebok.u.qiniudn.com/77/iphone3.png" alt="iphone" id="iphone3" />
			<img src="http://idowebok.u.qiniudn.com/77/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="http://idowebok.u.qiniudn.com/77/iphone-yellow.png" alt="iphone" id="iphone-yellow" />
			<img src="http://idowebok.u.qiniudn.com/77/iphone-red.png" alt="iphone" id="iphone-red" />
			<img src="http://idowebok.u.qiniudn.com/77/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="http://idowebok.u.qiniudn.com/77/iphone-two.png" alt="iphone" id="iphone-two" />
	</div>
</div>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_42645716/article/details/87690353
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022