FSVS(Full Screen Vertical Scroller)是一款jQuery和CSS3带过渡效果的全屏垂直翻页特效插件。该全屏翻页插件在页面上下滚动时一次翻一屏,并带有css3过渡动画效果。它的效果和OnePageScroll.js类似,但使用上要简单得多。
使用方法
HTML结构
注意:fsvs需要在HTML元素上指定特定的CLASS。
<!doctype html> <html class="fsvs" lang="en"> <head> <link href="assets/css/style.css" media="all" rel="stylesheet" type="text/css" /> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="assets/js/bundle.js"></script> </head> <body> <div id="fsvs-body"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div> </body> </html>
初始化插件
$(document).ready( function() { var slider = $.fn.fsvs({ speed : 5000, bodyID : 'fsvs-body', selector : '> .slide', mouseSwipeDisance : 40, afterSlide : function(){}, beforeSlide : function(){}, endSlide : function(){}, mouseWheelEvents : true, mouseWheelDelay : false, scrollabelArea : 'scrollable', mouseDragEvents : true, touchEvents : true, arrowKeyEvents : true, pagination : true, nthClasses : false, detectHash : true }); //slider.slideUp(); //slider.slideDown(); //slider.slideToIndex( index ); //slider.unbind(); //slider.rebind(); });
上面的参数都很简单,见其名就知其义。
更多关于该全屏翻页插件的信息可以参考:http://luke.sno.wden.co.uk/full-screen-vertical-scroll。