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。