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。






![MBTI 16型人格职业性格测试源码PC+H5自适应完整版基于ThinkPHP框架[亲测可用]](https://www.icbot.net/upload/portal/20250429/32ccad646f32a5f4926b3b7b5ef3232a.png)















