特效描述:jQuery 全屏页面 滚动切换代码。jQuery全屏页面滚动切换代码
代码结构
1. 引入CSS
<link rel="stylesheet" href="assets/css/style.css">
2. 引入JS
<script src="assets/js/jquery.min.js"></script> <script src="assets/js/jquery-migrate-1.2.1.min.js"></script> <script src="assets/js/jquery.swipe-events.js"></script> <script src="assets/js/prismjs.js"></script> <script src="assets/js/fsvs.js"></script> <script src="assets/js/main.js"></script>
3. HTML代码
<div id="fsvs-body"> <div class="slide" id="fsvs-initial-setup"> <h1 class="htmleaf-title">FSVS-jQuery和CSS3带过渡效果的全屏整页垂直滚动特效插件</h1> <pre><code class="language-javascript"> $(document).ready( function() { // The HTML tag must have a class of fsvs var fsvs = $.fn.fsvs({ speed : 1000 }); }); </code></pre> </div> </div> <div class="slide" id="basic-html-setup"> <h2>Basic HTML setup</h2> <div> <pre><code class="language-php"> <!doctype html> <html class="fsvs" lang="en"> <body> <div id="fsvs-body"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div> </body> </html> </code></pre> </div> </div> <div class="slide"> <h2>Default Options</h2> <pre><code class="language-javascript"> $(document).ready( function() { var fsvs = $.fn.fsvs({ speed : 5000, bodyID : 'fsvs-body', selector : '> .slide', mouseSwipeDisance : 40, afterSlide : function(){}, beforeSlide : function(){}, endSlide : function(){}, mouseWheelEvents : true, mouseDragEvents : true, touchEvents : true, arrowKeyEvents : true, pagination : true, nthClasses : false, detectHash : true }); }); </code></pre> </div> <div class="slide"> <h2>Load In New Slides On End</h2> <pre><code class="language-javascript"> $(document).ready( function() { var slider = $.fn.fsvs({ ... endSlide : function(index) { $('<div class="slide"><h2>Slide ' + (index+2) + '</h2></div>').appendTo( $('body') ); // reset the nth classes if you need it slider.nthClasses(3); // rebind pagination if you need it slider.addPagination(); } ... }); }); </code></pre> </div> </div>