Jquery单页全屏滚动效果 导航
来源:互联网 发布:电脑定时开关机软件 编辑:程序博客网 时间:2024/05/16 13:01
jQuery全屏滚动插件fullPage.js 介绍:
http://www.dowebok.com/77.html
http://www.dowebok.com/
演示Demo:
http://www.dowebok.com/demo/2014/77/index7.html#page1
其它全屏滚动效果案例Example:
http://guanjia.qq.com/product/introduce/
http://mail.163.com/html/ntesmail6/#node=0
http://news.baidu.com/z/memoryofxp/zhuanti.html
http://zhidao.baidu.com/topic/2014chunjie/
http://gamevip.qq.com/act/a20130107help/index.html
http://www.imagchina.com/
jQuery全屏滚动插件fullPage.js
http://www.dowebok.com/77.html
gitHub: https://github.com/alvarotrigo/fullPage.js/
下载: http://alvarotrigo.com/fullPage
------
简介
如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js。
fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:
- 支持鼠标滚动
- 支持前进后退和键盘控制
- 多个回调函数
- 支持手机、平板触摸事件
- 支持 CSS3 动画
- 支持窗口缩放
- 窗口缩放时自动调整
- 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
兼容性
jQuery 兼容
兼容 jQuery 1.7+。
浏览器兼容
使用方法
1、引入文件
<link rel="stylesheet" href="css/jquery.fullPage.css"><script src="js/jquery.min.js"></script><!-- jquery.easings.min.js 是必须的,用于 easing 参数,也可以使用完整的 jQuery UI 代替 --><script src="js/jquery.easings.min.js"></script><!-- 如果 scrollOverflow 设置为 true,则需要引入 jquery.slimscroll.min.js,一般情况下不需要 --><script src="js/jquery.slimscroll.min.js"></script><script src="js/jquery.fullPage.js"></script>
2、HTML
<div id="fullpage"> <div class="section">第一屏</div> <div class="section">第二屏</div> <div class="section"> <div class="slide">第三屏的第一屏</div> <div class="slide">第三屏的第二屏</div> <div class="slide">第三屏的第三屏</div> <div class="slide">第三屏的第四屏</div> </div> <div class="section">第四屏</div></div>
3、JavaScript
$(function(){ $('#fullpage').fullpage();});
配置
1、选项
2、方法
3、回调函数
index 是离开的“页面”的序号,从1开始计算;
nextIndex 是滚动到的“页面”的序号,从1开始计算;
direction 判断往上滚动还是往下滚动,值是 up 或 down。
afterRender页面结构生成后的回调函数,或者说页面初始化完成后的回调函数afterSlideLoad滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收 anchorLink、index、slideIndex、direction 4个参数onSlideLeave某一水平滑块滚动前的回调函数,与 onLeave 类似,接收 anchorLink、index、slideIndex、direction 4个参数------------------
代码演示:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>fullPage.js — 项目导航演示_dowebok</title>
<link rel="stylesheet" href="http://www.dowebok.com/demo/2014/77/css/jquery.fullPage.css">
<style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>
<script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://www.dowebok.com/demo/2014/77/js/jquery.fullPage.min.js"></script>
<script>
$(document).ready(function() {
$.fn.fullpage({
slidesColor: ['#1bbc9b', 'green', '#7BAABE', '#f90'],
anchors: ['page1', 'page2', 'page3', 'page4'],
navigation: true
});
});
</script>
</head>
<body>
<div class="section">
<h3>第一屏</h3>
<p>fullPage.js — 项目导航演示</p>
</div>
<div class="section">
<h3>第二屏</h3>
<p>请查看右边的圆圈</p>
</div>
<div class="section">
<h3>第三屏</h3>
<p>圆圈还可以设置位置,颜色,加上 tip,点击可以控制</p>
</div>
<div class="section">
<h3>第四屏</h3>
<p>这是最后一屏</p>
</div>
</body>
</html>
0 0
- Jquery单页全屏滚动效果 导航
- jquery全屏滚动效果
- onepage-scroll – jQuery单页/全屏滚动插件
- JQuery实现导航效果、新闻滚动、广告效果、横向滚动
- JQuery实现导航效果、新闻滚动、广告效果、横向滚动
- JQuery实现导航效果、新闻滚动、广告效果、横向滚动
- FullPage.js – 轻松实现全屏滚动(单页网站)效果的应用
- 【jQuery】用jQuery实现定位滚动导航效果
- Jquery 全屏滚动插件
- jQuery实现固定顶部 定位滚动导航效果代码
- jQuery滚动条事件控制导航显示效果
- jquery 图片全屏效果
- 实现单页面导航效果的jQuery插件 - SMINT
- jQuery----全屏滚动插件fullPage
- jQuery底部带导航的图片切换,定时上下滚动效果(无滚轮切换效果)
- [前端] 滚动监听导航效果
- jQuery 导航动态效果
- jQuery滚动停顿滚动效果
- OpenCV学习(十五)之图像金字塔
- POJ 2253 Frogger
- MySQL5.6中limit的工作机制和order by limit优化原理
- PHP函数(三) 文件处理函数
- Mysql基本操作(二)
- Jquery单页全屏滚动效果 导航
- 通过执行OS 命令完成文件夹的删除。
- 安卓开发体验之一 开发环境搭建
- 网络营销对企业有什么好处
- PHP函数(四) 时间函数
- iOS开发——在特定时间、任意时间做本地推送UILocalNotification
- [leetcode 67] Add Binary
- Spring AOP常见错误解析
- 非spring管理的类实例如何托管给spring容器管理