fullPage.js — 循环演示
28 |这是最后一屏了，继续往下滚返回第一屏
38 |fullPage.js — 项目导航演示
28 |请查看右边的圆圈
32 |圆圈还可以设置位置，颜色，加上 tip，点击可以控制
36 |这是最后一屏
40 |fullPage.js — 基本演示
27 |这是最后一屏
39 |请滚动到第二屏查看
17 |根据可视区域大小启用/关闭全屏滚动效果
16 |如果可视区宽度小于1024，则关闭全屏滚动效果，使用自带的滚动条
19 |请试着调整浏览器大小并查看滚动条是否出现
22 |第四屏
25 |fullPage.js — 绑定菜单演示
40 |请查看左上角，点击可以控制
44 |绑定的菜单没有默认的样式，你需要自行编写
48 |这是最后一屏
52 |fullPage.js — 回调函数演示
61 |滚动到第二屏后的回调函数执行的效果
65 |滚动到第三屏后的回调函数执行的效果
69 |滚动到第四屏后的回调函数执行的效果
73 |fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。
24 |62 | 更多请参考 >> 63 | 说 明 64 | 下 载 65 |
66 | 67 | 68 | -------------------------------------------------------------------------------- /fullPage.js/css/jquery.fullPage.css: -------------------------------------------------------------------------------- 1 | /** 2 | * fullPage 2.4.6 3 | * https://github.com/alvarotrigo/fullPage.js 4 | * MIT licensed 5 | * 6 | * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo 7 | */ 8 | html, body { 9 | margin: 0; 10 | padding: 0; 11 | overflow:hidden; 12 | 13 | /*Avoid flicker on slides transitions for mobile phones #336 */ 14 | -webkit-tap-highlight-color: rgba(0,0,0,0); 15 | } 16 | #superContainer { 17 | height: 100%; 18 | position: relative; 19 | 20 | /* Touch detection for Windows 8 */ 21 | -ms-touch-action: none; 22 | 23 | /* IE 11 on Windows Phone 8.1*/ 24 | touch-action: none; 25 | } 26 | .fp-section { 27 | position: relative; 28 | -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */ 29 | -moz-box-sizing: border-box; /* <=28 */ 30 | box-sizing: border-box; 31 | } 32 | .fp-slide { 33 | float: left; 34 | } 35 | .fp-slide, .fp-slidesContainer { 36 | height: 100%; 37 | display: block; 38 | } 39 | .fp-slides { 40 | z-index:1; 41 | height: 100%; 42 | overflow: hidden; 43 | position: relative; 44 | -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */ 45 | transition: all 0.3s ease-out; 46 | } 47 | .fp-section.fp-table, .fp-slide.fp-table { 48 | display: table; 49 | table-layout:fixed; 50 | width: 100%; 51 | } 52 | .fp-tableCell { 53 | display: table-cell; 54 | vertical-align: middle; 55 | width: 100%; 56 | height: 100%; 57 | } 58 | .fp-slidesContainer { 59 | float: left; 60 | position: relative; 61 | } 62 | .fp-controlArrow { 63 | position: absolute; 64 | z-index: 4; 65 | top: 50%; 66 | cursor: pointer; 67 | width: 0; 68 | height: 0; 69 | border-style: solid; 70 | margin-top: -38px; 71 | } 72 | .fp-controlArrow.fp-prev { 73 | left: 15px; 74 | width: 0; 75 | border-width: 38.5px 34px 38.5px 0; 76 | border-color: transparent #fff transparent transparent; 77 | } 78 | .fp-controlArrow.fp-next { 79 | right: 15px; 80 | border-width: 38.5px 0 38.5px 34px; 81 | border-color: transparent transparent transparent #fff; 82 | } 83 | .fp-scrollable { 84 | overflow: scroll; 85 | 86 | } 87 | .fp-notransition { 88 | -webkit-transition: none !important; 89 | transition: none !important; 90 | } 91 | #fp-nav { 92 | position: fixed; 93 | z-index: 100; 94 | margin-top: -32px; 95 | top: 50%; 96 | opacity: 1; 97 | } 98 | #fp-nav.right { 99 | right: 17px; 100 | } 101 | #fp-nav.left { 102 | left: 17px; 103 | } 104 | .fp-slidesNav{ 105 | position: absolute; 106 | z-index: 4; 107 | left: 50%; 108 | opacity: 1; 109 | } 110 | .fp-slidesNav.bottom { 111 | bottom: 17px; 112 | } 113 | .fp-slidesNav.top { 114 | top: 17px; 115 | } 116 | #fp-nav ul, 117 | .fp-slidesNav ul { 118 | margin: 0; 119 | padding: 0; 120 | } 121 | #fp-nav ul li, 122 | .fp-slidesNav ul li { 123 | display: block; 124 | width: 14px; 125 | height: 13px; 126 | margin: 7px; 127 | position:relative; 128 | } 129 | .fp-slidesNav ul li { 130 | display: inline-block; 131 | } 132 | #fp-nav ul li a, 133 | .fp-slidesNav ul li a { 134 | display: block; 135 | position: relative; 136 | z-index: 1; 137 | width: 100%; 138 | height: 100%; 139 | cursor: pointer; 140 | text-decoration: none; 141 | } 142 | #fp-nav ul li a.active span, 143 | .fp-slidesNav ul li a.active span { 144 | background: #333; 145 | } 146 | #fp-nav ul li a span, 147 | .fp-slidesNav ul li a span { 148 | top: 2px; 149 | left: 2px; 150 | width: 8px; 151 | height: 8px; 152 | border: 1px solid #000; 153 | background: rgba(0, 0, 0, 0); 154 | border-radius: 50%; 155 | position: absolute; 156 | z-index: 1; 157 | } 158 | #fp-nav ul li .fp-tooltip { 159 | position: absolute; 160 | top: -2px; 161 | color: #fff; 162 | font-size: 14px; 163 | font-family: arial, helvetica, sans-serif; 164 | white-space: nowrap; 165 | max-width: 220px; 166 | overflow: hidden; 167 | display: block; 168 | opacity: 0; 169 | width: 0; 170 | } 171 | #fp-nav ul li:hover .fp-tooltip { 172 | -webkit-transition: opacity 0.2s ease-in; 173 | transition: opacity 0.2s ease-in; 174 | width: auto; 175 | opacity: 1; 176 | } 177 | #fp-nav ul li .fp-tooltip.right { 178 | right: 20px; 179 | } 180 | #fp-nav ul li .fp-tooltip.left { 181 | left: 20px; 182 | } 183 | -------------------------------------------------------------------------------- /fullPage.js/index8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
104 | 
110 | 
116 | 
117 | 
118 | 
131 | 
132 | 
133 | 
152 |