🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

scrollview.js is a simple-to-use jQuery plugin used to create smooth vertical or horizontal fullscreen scrolling effect for one page website / web application.

scrolling One-Page-Scrolling

Documentation

scrollview.js

scrollview.js是一款单页面滚动切换插件,适用于全屏的网站开发;同时scrollview.js也能够作为移动端的滚动视差插件。 该插件特别为移动端进行了适配,少量加入了几个动画;同时插件还封装了css3动画效果么。以便更好的应用开发。

一丶使用:

HTML

 <!--这里的section结构与data-index是必须的--> <div id="main"> 	<section data-index=1 class="page1"></section> 	<section data-index=2 class="page2"></section> 	<section data-index=3 class="page3"></section> </div>  

CSS引用:

<link rel="stylesheet" href="./css/style.css"> <link rel="stylesheet" href="./css/asset.css"> 

JS引用:

<script src="./js/jquery-1.11.2.js"></script> <script src="./js/scrollview.js"></script> <script>     jQuery(document).ready(function($) { 		$("#main").scrollview({ 			sectionContainer: "section", 		    responsiveFallback: 600, 		    loop: true 		}) 	});	 </script> 

###二丶定制:

    var defaults={     	sectionContainer: "section", //指定单页面外部容器 	    easing: "ease",				 //页面切换缓动效果 	    animationTime: 1000,	     //切换时间(毫秒) 	    pagination: true,            //是否显示导航 	    updateURL: false,            //切换页面是否更新网页url 	    supportOld:false,            //是否兼容老版本浏览器 	    keyboard: true,              //是否可以用方向键控制 	    beforeMove: null,            //页面切换前回调 	    afterMove: null,             //页面切换后回调 	    loop: true,                  //当前页面为最后一个是,继续切换是否可以 	    responsiveFallback: false,   //是否当浏览器宽度为某一个指定值的时候,去除该插件效果,如果想实现这种效果,那么可以指定一个宽度值 	    direction : 'vertical'       // 页面切换方向,可选值为 "vertical"垂直 和"horizontal"水平. 默认 "vertical"  	} 

You May Also Like