下载地址

实例代码

<!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. JS中实现数组和对象的深拷贝和浅拷贝

    数组的拷贝 > 数组的深拷贝,两层 var arr = [[1,2,3],[4,5,6],[7,8,9]]; var arr2 = []; 循环第一层数组 for(var i=0,len=arr ...

  2. centos-lynx

    1.官网 http://lynx.isc.org 2.稳定版本 http://invisible-mirror.net/archives/lynx/tarballs/lynx2.8.8rel.2.ta ...

  3. tomcat本地部署war包的方式

    最近学习java,在本地tomcat部署时,主要采取以下方式: 一.本地构建生成war包 在本地项目中的terminal下,使用命令 “mvn clean install”或 先执行“mvn clea ...

  4. 有关PHP、HTML单引号、双引号转义以及转成HTML实体的那些事！

    一.单引号和双引号转义在PHP的数据存储过程中用得比较多,即往数据库里面存储数据时候需要注意转义单.双引号: 先说几个PHP函数: 1.addslashes — 使用反斜线引用(转义)字符串: 返回字 ...

  5. 如何在windows 10 x64安装佳能 CP900 驱动

    佳能太无耻,为了销售CP910 , CP900 到win8 ,win8.1,win 10 都没有驱动程序,网上找的方法都不行,IT民工自有办法: 1.按住shift键,重启电脑 restart 2.在 ...

  6. Anliven - 你的学习为何如此低效？！

    拖延 适时学习的本质就是营造机会,具有强烈的时效性,而拖延能够毁灭所有机会! 一个得不到执行的完美计划,比不上一次仓促的执行! 盲目 缺少有效的策略和方法,没有弄清基本的问题(需求--->性质- ...

  7. Android中Services简析

    Services是Android中四大基础组件(Activities. Services. Content Providers. BroadCast Receivers)之一,主要用于在后台长时间运行 ...

  8. 【JDK源码分析】String的存储区与不可变性

    // ... literals are interned by the compiler // and thus refer to the same object String s1 = " ...

  9. Elasticsearch Span Query跨度查询

    ES基于Lucene开发,因此也继承了Lucene的一些多样化的查询,比如本篇说的Span Query跨度查询,就是基于Lucene中的SpanTermQuery以及其他的Query封装出的DSL,接 ...

  10. MVC应用程序的生命周期图