滾動(dòng)滑屏成功的案例給大家做一個(gè)參考！
<DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meat name="viewport" content="widt=device-width, initial-scale=1,user-scalable=no/">
? ? <link rel="stylesheet" />
? ? <style type="text/css">
? ? body{background: #fff;}
? ? .section1{text-align: center; background-color: orange;}
? ? .section2{text-align: center; background-color: green;}
? ? .section3{text-align: center; background-color: gray;}
? ? .section4{text-align: center; background-color: red;}
? ? ? ? ?.slide{text-align: center;}
? ? ? ?
? ? </style>
?</head>
<body>
? <div id="fullpage">
? <div class="section section1"><h1>這個(gè)是第一屏</h1></div>
? <div class="section section2">
? ? ? ? <div class="slide">這個(gè)是第二屏的第一頁(yè)</div>
? ? ? ? <div class="slide">這個(gè)是第二屏的第二頁(yè)</div>
? ? ? ? <div class="slide">這個(gè)是第二屏的第三頁(yè)</div>
? ? ? ? <div class="slide">這個(gè)是第二屏的第四頁(yè)</div>
? ? </div>
? <div class="section section3"><h1>這個(gè)是第三屏</h1></div>
? <div class="section section4"><h1>這個(gè)是第四屏</h1></div>
? </div>
?<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.8/jquery.fullPage.js"></script>
? ? <script type="text/javascript">
? ? $(document).ready(function(){
? ? $('#fullpage').fullpage();
? ? })
? ? </script>
</body>
</html>
2019-09-02
感謝！?
2017-03-05
666