用fullPage来实现全屏滚动效果
【注意】所有的page要用div包裹，id为fullpage.不能直接包在body中
【使用fullpage的步骤】
1、导入 JQuery.js,fullpage.js,fullpage.css <!-- fullPage.js 必须在 JQuery.js 之后导入，否则无效 -->
2、组建网页布局，最外层 id=fullpage 单页class=section 幻灯片 class="slide"
3、JS中使用$(“#fullpage").fullpage();调用执行
【代码如下】
《css样式部分》
<style type="text/css">
.section1{
background-color: yellowgreen;
}
.section2{
background-color: deepskyblue;
}
.section3{
background-color: tomato;
}
.section4{
background-color: cadetblue;
}
#menu{
position: fixed;/*生成绝对定位的元素，相对于浏览器窗口进行定位*/
left: 20px;
top: 10px;
z-index: 999;/*不被覆盖，显示在最外层*/
padding: 0px;
}
#menu li{
float: left;
list-style: none;
width: 80px;
height: 25px;
line-height: 25px;
margin: 0px 5px;
text-align: center;
background-color: #BCBCBC;
border-radius: 7px;
}
#menu li a{
text-decoration: none;
color: white;
}
</style>
《body部分》
<body>
<ul id="menu">
<!--data-menuanchor是设置要选中的栏目-->
<li data-menuanchor="page1"><a href="#page1">page1</a></li>
<li data-menuanchor="page2"><a href="#page2">page2</a></li>
<li data-menuanchor="page3"><a href="#page3">page3</a></li>
<li data-menuanchor="page4"><a href="#page4">page4</a></li>
</ul>
<!--所有page要用div包裹，id为fullpage。不能直接包在body中-->
<div id="fullpage" >
<!-- 所有的单页，class为section -->
<div class="section section1">page1</div>
<div class="section section2">
<div class="slide">page2-1</div>
<div class="slide">page2-2</div>
<div class="slide">page2-3</div>
</div>
<div class="section section3">page3</div>
<div class="section section4">page4</div>
</div>
</body>
《js部分》
<script type="text/javascript">
$(function(){/*文档准备函数*/
/*添加完单页后，需调用.fullpage()方法，才能生效*/
$("#fullpage").fullpage({
anchors: ['page1', 'page2', 'page3', 'page4'],
menu:"#menu",
navigation:true,
});
用fullPage来实现全屏滚动效果的更多相关文章
- 手机端实现fullPage——全屏滚动效果
封装了一个小插件模拟fullPage的全屏滚动效果,比较简单. 特点: 1. 纯js实现,小巧轻便. 2. 兼容性好.苹果.安卓都没问题,暂时没遇到问题机型. 缺点: 1. 仅封装了基础功能,H ...
- 六一广告页H5全屏滚动效果实现
明天就六一儿童了(放假了),在这里提前祝大家周末快乐,每逢节假日公司必然会推出h5活动页的需求,这次六一儿童节也不例外,产品这次倒是没提什么互动效果需求,只不过根据UI妹子给的设计图,图片与图片中颜色 ...
- 全屏滚动效果H5FullscreenPage.js
前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto. ...
- pagePiling.js - 创建漂亮的全屏滚动效果
全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...
- pagePiling.js - 创建美丽的全屏滚动效果
在线演示 在线演示 本地下载 全屏滚动效果是近期很流行的网页设计形式,带给用户良好的视觉和交互体验. pagePiling.js 这款jQuery插件能够帮助前端开发者轻松实现这样的效果.支持全部的主 ...
- fullpage.js jq全屏滚动插件
fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下 ...
- FullPage.js – 轻松实现全屏滚动（单页网站）效果
FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...
- scrollify - 滚动条方式的全屏滚动
jQuery Scrollify Version Beta v1.0.5 Date:2017-04-25 23:45 源代码 (function($, window, document) { 'use ...
- 全屏滚动插件pagePiling.js
全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...
随机推荐
- CodeForces 540B School Marks
http://codeforces.com/problemset/problem/540/B School Marks Time Limit:2000MS Memory Limit:26214 ...
- KeyChainWrapper - keychain简单使用
1 keyChainWrapper是MRC代码,要禁用ARC -fno-objc-arc 2 要导入Security.framework框架 3 获得一个不变的UUID - (BOOL)applica ...
- Xshell多版本被曝存在后门，了解紧急响应修复预案
近日,Xshell远程终端工具被爆出多个版本存在后门,无疑是安全圈的一个大新闻.恶意攻击者利用该后门可以收集到用户名密码等主机敏感信息,并将之传回攻击者的机器,导致服务器信息泄露,进一步可致使整个服务 ...
- 【JS深入学习】——函数创建和重载
今天做一个关注/取消的功能,由于需要向后台发送请求,想通过控制用户点击发送的频次减少不必要的请求,即在一定时间内,用户点击多次但只发送一次数据,自然而然想到了使用[函数节流]. function th ...
- shell while-ssh
Linux shell脚本使用while循环执行ssh的注意事项 浏览:86次 出处信息 如果要使用ssh批量登录到其它系统上操作时,我们会采用循环的方式去处理,那么这里存在一个巨大坑,你必须要小心了 ...
- 【wireshark】协议解析
1. 普通解析 Wireshark启动时,所有解析器进行初始化和注册.要注册的信息包括协议名称.各个字段的信息.过滤用的关键字.要关联的下层协议与端口(handoff)等.在解析过程,每个解析器负责解 ...
- Python小白学习之路（三）—【数字功能】【字符串功能】
数字(int)常见功能 在网络课上,老师把这些功能称为神奇的魔法,想要揭开魔法神奇的面纱,想要看看有什么招数,在Pycharm里敲击三个字母(int),按住Ctrl,将鼠标点在int上,这时鼠标会变成 ...
- numpy的ravel（）和flatten（）函数比较
功能 两个函数的功能都是将多维数组降为一维. 用法 import numpy as np arr = np.array([[1, 2],[3, 4]]) arr.flatten() arr.ravel ...
- C#获取获取北京时间多种方法
#region 获取网络时间 ///<summary> /// 获取中国国家授时中心网络服务器时间发布的当前时间 ///</summary> ///<returns> ...
- J05-Java IO流总结五 《 BufferedInputStream和BufferedOutputStream 》
1. 概念简介 BufferedInputStream和BufferedOutputStream是带缓冲区的字节输入输出处理流.它们本身并不具有IO流的读取与写入功能,只是在别的流(节点流或其他处理流 ...