課程
/前端開發
/JavaScript
/FullPage.js全屏滾動插件
下面這個是引入順序
2017-06-06
源自:FullPage.js全屏滾動插件 3-2
正在回答
怪我自己不小心 H1 寫成H4 ?罪過罪過
<!DOCTYPE?html> <html> <head> ????<meta?charset="UTF-8"> ????<meta?name="viewport"?content="width=device-width,?user-scalable=no,?initial-scale=1.0,?maximum-scale=1.0,?minimum-scale=1.0"> ????<title>Document</title> ????<link?rel="stylesheet"?type="text/css"?> ????<style?type="text/css"> ????body?{ ????????background:?#eaeaea ????} ???? ????#fullpageMenu?{ ????????z-index:?999; ????????position:?fixed; ????????top:?0; ????????left:?0 ????} ???? ????#fullpageMenu?.active?{ ????????background:?#f60; ????} ????.section?h4{ ?????margin:?0?auto ????} ????.section?{ ?????text-align:?center; ????} ????</style> </head> <body> ???<!--??<ul?id="fullpageMenu"> ????????<li?data-menuanchor="page1"><a?href="#page1">1?section</a></li> ????????<li?data-menuanchor="page2"><a?href="#page2">2?section</a></li> ????????<li?data-menuanchor="page3"><a?href="#page3">3?section</a></li> ????????<li?data-menuanchor="page4"><a?href="#page4">4?section</a></li> ????</ul>?--> ????<div?id="fullpage"> ????????<div?class="section?section1"> ????????????<h1>內容1</h1> ????????</div> ????????<div> ????????????<div>1</div> ????????????<div>2</div> ????????????<div>3</div> ????????????<div>4</div> ????????</div> ????????<div> ????????????<p>1</p> ????????????<p>2</p> ????????????<p>3</p> ????????????<p>4</p> ????????????<p>5</p> ????????????<p>6</p> ????????????<p>7</p> ????????????<p>8</p> ????????????<p>9</p> ????????????<p>10</p> ????????????<p>11</p> ????????????<p>12</p> ????????????<p>13</p> ????????????<p>14</p> ????????????<p>15</p> ????????????<p>16</p> ????????????<p>17</p> ????????????<p>18</p> ????????????<p>19</p> ????????????<p>20</p> ????????</div> ????????<div> ????????</div> ????</div> ????<script?src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> ????<script?type="text/javascript"?src="https://cdnjs.cloudflare.com/ajax/libs/move.js/0.5.0/move.js"></script> ????<script?src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/vendors/jquery.easings.min.js"></script> ????<script?src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.js"></script> ????<script?src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.js"></script> ????<script?type="text/javascript"> ????$(document).ready(function()?{ ????????$("#fullpage").fullpage({ ????????????//設置背景顏色 ????????????sectionsColor:?['red',?'blue',?'yellow',?'green'], ????????????//設置橫向箭頭 ????????????//controlArrows:false, ????????????//設置每一頁內容是否為垂直居中 ????????????verticalCentered:false, ????????????//設置字體是否隨著窗口縮放 ????????????//?resize:true, ????????????//設置滾動速度,單位毫秒,默認700 ????????????//scrollingSpeed:3000, ????????????//定義錨鏈接 ????????????anchors:?['page1',?'page2',?'page3',?'page4'], ????????? ????????????loopTop:?true, ????????????loopBottom:?true, ????????????loopHorizontal:?false, ??????????? ????????????continuousVertical:?true, ???????????? ????????????scrollOverflow:?true, ????????????afterLoad:?function(anchorLink,?index)?{ ??????????????if(index?==?1){ ???????????????move(".section1?h4").scale(2).end() ??????????????} ????????????}, ????????????onLeave:?function(index,?next,?direction)?{ ????????????????console.log(index,?next,?direction) ????????????}, ????????}) ????}) ????</script> </body> </html>
舉報
基于jQuery的全屏滾動效果插件,讓翻頁顯得格外的高端大氣上檔次
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-06-06
怪我自己不小心 H1 寫成H4 ?罪過罪過
2017-06-06