练习 fullpage

下面参照做的一个例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>This is my first fullpage demo</title><link rel="stylesheet" href="./css/jquery.fullPage.css"><script src="../jquery-2.1.3.min.js"></script><script src="./lib/jquery.easing.min.js"></script><script src="./lib/jquery.fullPage.min.js"></script><script>$(function () {$(".main").fullpage({continuousVertical: true,loopBottom: false,//从头开始anchors: ['page1', 'page2', 'page3', 'page4'],menu: '#menu',navigation: true,afterLoad: function(anchorLink, index){if(index == 2){$('.s2').find('p').delay(500).animate({left: '0'}, 1500, 'easeOutExpo');}if(index == 3){$('.s3').find('p').delay(500).animate({bottom: '0'}, 1500, 'easeOutExpo');}if(index == 4){$('.s4').find('p').fadeIn(2000);}},onLeave: function(index, direction){if(index == '2'){$('.s2').find('p').delay(500).animate({left: '-120%'}, 1500, 'easeOutExpo');}if(index == '3'){$('.s3').find('p').delay(500).animate({bottom: '-120%'}, 1500, 'easeOutExpo');}if(index == '4'){$('.s4').find('p').fadeOut(2000);}}});setInterval(function(){$.fn.fullpage.moveSectionDown();}, 3000);setInterval(function(){$.fn.fullpage.moveSlideRight();}, 1000);//根据可视区域大小启用/关闭全屏滚动效果$(window).resize(function(){autoScrolling();});function autoScrolling(){var $ww = $(window).width();if($ww < 1024){$.fn.fullpage.setAutoScrolling(false);} else {$.fn.fullpage.setAutoScrolling(true);}}autoScrolling();});</script><style>.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}.s2 p { position: relative; left: -120%;}.s3 p { position: relative; bottom: -120%;}.s4 p { display: none;}.main {text-align: center;}.s1 {background: url("./images/1.jpg") 50%;}.s2 {background: url("./images/2.jpg") 50%;}.s3 {background: url("./images/3.jpg") 50%;}.s4 {background: url("./images/4.jpg") 50%;}/*.l1 {background-image: url("../../../html/demo/images/servlet/1.jpg");}*/.l2 {background-image: url("../../../html/demo/images/servlet/2.jpg");}.l3 {background-image: url("../../../html/demo/images/servlet/3.jpg");}.l4 {background-image: url("../../../html/demo/images/servlet/4.jpg");}#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;}</style>
</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 class="main"><div class="section s1"><h1>第1屏</h1><p>fullPage.js — 回调函数演示</p></div><div class="section s2"><h1>第2屏</h1><p>滚动到第二屏后的回调函数执行的效果</p><div class="slide l1"></div><div class="slide l2"></div><div class="slide l3"></div><div class="slide l4"></div></div><div class="section s3"><h1>第3屏</h1><p>滚动到第三屏后的回调函数执行的效果</p></div><div class="section s4"><h1>第4屏</h1><p>滚动到第四屏后的回调函数执行的效果</p></div>
</div></body>
</html>

练习 fullpage相关推荐

fullPage教程 -- 整屏滚动效果插件 fullpage详解
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:fullPage教程 -- 整屏滚动效果插件 fullpage详解 1. ...
fullpage的应用
2019独角兽企业重金招聘Python工程师标准>>> 先记录代码: HTML部分: <!DOCTYPE html> <html lang="en&quo ...
fullpage 单屏高度超过屏幕高度，实现单屏内可以滚动并解决手机端单屏高度不正确的问题
fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题参考文章: (1)fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题 ...
拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
php单屏网站源码,关于原生js实现类似fullpage的单页/全屏滚动的方法
这篇文章主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法,文中给出了完整的实例代码,相信对大家的理解和学习具有一定的参考价值,需要的朋友们可以参考借鉴,下面来一起看看吧. 前言单页 ...
使用fullPage做的大图片全屏滚动
本地的图片和css等文件 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset ...
转【FullPage.js 应用参数参考与简单调用】
简介如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站 ...
Fullpage参数说明
参数说明 $(document).ready(function() {$('#fullpage').fullpage({//Navigationmenu: false,//绑定菜单,设定的相关属性与a ...
【转载】fullpage.js学习
参考网址:http://www.dowebok.com/77.html 上面有详细介绍及案例展示,很不错哦,可以先去看看demo 一.简介 fullPage.js 是一个基于jQuery的插件,它能 ...
jQuery全屏滚动插件fullPage.js
演示下载简介如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),Q ...

练习 fullpage

练习 fullpage相关推荐

最新文章

热门文章