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。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!