下载地址

实例代码

<!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. Apache Tomcat

    官网:http://tomcat.apache.org/ Documentation:http://tomcat.apache.org/tomcat-8.0-doc/index.html

  2. 使用jasperreports-5.6.0.jar导致的问题

    使用jasperreports-5.6.0.jar导致的问题 Struts2+jasperReport5.6如下设置: <!-- 社员档案 --> <package name=&qu ...

  3. wamp2.5 配置Apache允许外网访问

    找到<Directory "e:/wamp/www/">节点,在里面添加Require all granted

  4. CSS滚动条

    × 目录 [1]条件 [2]默认 [3]尺寸[4]兼容[5]自定义 前面的话 滚动条在网页中经常见到,却并没有受到足够的重视.只有当因为滚动条的问题需要处理兼容性时,才进行调试操作.本文将就滚动条的常 ...

  5. CSS学习目录

    前面的话 CSS是前端工程师的基本功,但好多执迷于学习javascript的人的基本功并不扎实.可能一些人从w3school网站匆匆过了一遍,只是对CSS常用概念有一些表面上的理解,就一头扎进java ...

  6. 数据可视化(7)--D3基础

    一直想写写D3,觉得D3真心比较强大,基本上你能想出来的图表都能绘制出来,只不过使用起来比前几个要稍麻烦一点. 正好最近读完了<数据可视化实战>,将关于D3的知识梳理了一遍,写这篇博客记录 ...

  7. [java] 汇率换算器实现(3)

    [java] 汇率换算器实现(3) // */ // ]]>   [java] 汇率换算器实现(3) Table of Contents 1 系列文章地址 2 前言 3 提取简单表单信息 3.1 ...

  8. WebGL实现HTML5的3D贪吃蛇游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

  9. 分享15个HTML5工具

    HTML5 Working Draft Specification HTML5 Working Draft Specification译为HTML 5工作草案标准,它是 HTML5 的最新草案,由 W ...

  10. iOS学习笔记——多控制器管理

    NavigationController 在StoryBoard中添加NavigationController 在上网看到很多都是用xib添加,使用StoryBard的有两种办法,但我觉得下面用到那种 ...