下载地址

实例代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<title>fullPage.js — 基本演示_手册网</title>

<link rel="stylesheet" href="/api/jq/5733e33232116/css/jquery.fullPage.css">

<style>

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

</style>

<script src="/api/jq/5733e33232116/js/jquery-1.8.3.min.js"></script>

<script src="/api/jq/5733e33232116/js/jquery.fullPage.min.js"></script>

<script>

$(function(){

	$('#sucaihuo').fullpage({

		sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']

	});

});

</script>

</head>

<body>

<div id="sucaihuo">

	<div class="section">

		<h3>第一屏</h3>

		<p>fullPage.js — 基本演示</p>

	</div>

	<div class="section">

		<div class="slide"><h3>第二屏的第一屏</h3></div>

		<div class="slide"><h3>第二屏的第二屏</h3></div>

		<div class="slide"><h3>第二屏的第三屏</h3></div>

	</div>

	<div class="section">

		<h3>第三屏</h3>

	</div>

	<div class="section">

		<h3>第四屏</h3>

		<p>这是最后一屏</p>

	</div>

</div>

<a href="#" style="display: none;">sucaihuo</a>

<a href="#" style="display: none;">jQuery全屏滚动插件fullPage.js</a>

</body>

</html>

　　

jQuery+fullPage.js演示10种全屏滚动的更多相关文章

  1. FullPage.js 活动单页 - 全屏滚动插件

    插件描述:fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站. https://www.uedsc.com/fullpage.html 官网 如今我们经常能 ...

  2. pagePiling.js - 创建美丽的全屏滚动效果

    在线演示 在线演示 本地下载 全屏滚动效果是近期很流行的网页设计形式,带给用户良好的视觉和交互体验. pagePiling.js 这款jQuery插件能够帮助前端开发者轻松实现这样的效果.支持全部的主 ...

  3. pagePiling.js - 创建漂亮的全屏滚动效果

    全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...

  4. 原生js实现简单的全屏滚动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. FullPage.js-基于 jQuery 的插件全屏滚动插件

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...

  6. jquery.fullPage.js全屏滚动插件教程演示

    css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...

  7. 【转载】jQuery全屏滚动插件fullPage.js

    文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些 ...

  8. Fullpage.js全屏滚动jQuery插件

    兼容性: 支持 IE8+ 及其他现代浏览器. 主要功能: 1.支持鼠标滚动: 2.支持前进后退键盘控制; 3.多个回调函数; 4.支持手机.移动设备; 5.支持窗口缩放自动调整; 6.可设置滚动宽度. ...

  9. jquery.fullPage.js全屏滚动插件

    注:本文内容复制于http://www.51xuediannao.com/js/jquery/jquery.fullPage.html 和 http://www.360doc.com/content/ ...

随机推荐

  1. Archlinux 2015.07.01 和 Windows7 双系统 安装教程

    提前在windows7下给Archlinux预留一个分区,大小最好在20G以上(根据自己硬盘情况分配). 第一步,安装前的准备 从arch官网下载最新的ISO文件archlinux-2015.07.0 ...

  2. 实用的开放源码的Excel导入导出类库 CarlosAg ExcelXmlWriter

    做企业管理软件经常会遇到要把数据导出成EXCEL格式,目前市面上有很多工具类库可以实现此功能.CarlosAg ExcelXmlWriter是其中之一,它绿色小巧,免安装,又源码开放,我在项目中一直以 ...

  3. PNG使用技巧 PNG的使用技巧

    PNG的格式和透明度 这个Fireworks会比较清楚,打开Fireworkd优化面板,可以清楚看到png有3种不同深度的格式:png8.png24.png32. 其中,在优化面板选择png8,可发现 ...

  4. Ajax在IE浏览器会出现中文乱码解决办法

    在AJAX浏览器来进行发送数据时,一般它所默认的都是UTF-8的编码. Ajax在IE浏览器会出现中文乱码的情况!解决办法如下 <script type="text/javascrip ...

  5. DRA(Data Recovery Advisor)的使用

    关于DRA的官方描述: The simplest way to diagnose and repair database problems is to use the Data Recovery Ad ...

  6. 使用 CSS3 & jQuery 制作漂亮的书签动画

    今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...

  7. 2013年最佳的16个 Photoshop 设计教程推荐

    使用 Photoshop 的时候,没有基础操作知识的话,用起来会非常困难,所以你应该阅读一些教程才能应用它们在你的工作中.在这篇文章中你看到的 Photoshop 教程的集合是2013年发布的最优秀的 ...

  8. 【数据压缩】LZ77算法原理及实现

    1. 引言 LZ77算法是采用字典做数据压缩的算法,由以色列的两位大神Jacob Ziv与Abraham Lempel在1977年发表的论文<A Universal Algorithm for ...

  9. 30天C#基础巩固-----序列化,集合

    关于集合的练习. ----->计算字符串每个字符出现的次数. Console.WriteLine("请输入?"); string input = Console.ReadLi ...

  10. 通过原生JS实现为元素添加事件

    自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流 代码: var b ...