基于jQuery的fullPage.js全屏滚动插件

(一)描述:fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便、很轻松的制作出全屏网站。

(二)功能:支持鼠标滚动;支持前进后退和键盘控制;多个回调函数;支持手机、平板触摸事件;支持 CSS3 动画;支持窗口缩放;窗口缩放时自动调整;可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等。

(三)兼容性:支持 IE8+ 及其他现代浏览器。

(四)参考网站:http://www.smartisan.com/t1/#/design

(五)使用方法:

1、下载fullPage.js

      下载地址:http://www.dowebok.com/77.html

2、引入js文件

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>fullPageDemo</title>

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>

</head>

3、引入CSS样式文件

<link rel="stylesheet" href="css/jquery.fullPage.css">

4、HTML页面

<body>
    <div id="dowebok">
        <div class="section">
            <h3>第一屏</h3>
        </div>
        <div class="section">
            <h3>第二屏</h3>
        </div>
        <div class="section">
            <h3>第三屏</h3>
        </div>
        <div class="section">
            <h3>第四屏</h3>
        </div>
    </div>
</body>

5、CSS样式

<style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>

6、JavaScript脚本

<script>
$(function(){
	$('#dowebok').fullpage({
		sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
		'navigation': true,
	});
});
</script>

7、运行代码即可

8、下载文件的使用

下载后的js压缩包,有index.html文件。打开后有基本演示和综合演示两种,可以根据自己网页需要的样式进行相关配置和修改,另外可以参考fullPage的配置文件设置参数。

你可能感兴趣的:(jquery,插件,css3)