下载地址

实例代码

<!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. struts2默认action

    struts.xml文件的某个package中添加<default-action-ref name="error"></default-action-ref> ...

  2. CardLayout布局练习（小的图片浏览器）

    /* 涉及Panel中的图片的加载,还有Frame的关闭的方法, CardLayout(int hgap, int vgap)就会决定卡片面板的大小 匿名类的使用... */ import java. ...

  3. How do annotations work internally--转

    原文地址:http://stackoverflow.com/questions/18189980/how-do-annotations-work-internally The first main d ...

  4. 10套免费的 Photoshop UI 元素以及 PSD 素材

    免费的 PSD 用户界面工具包以及可以编辑 Photoshop PSD 文件,有你需要的设计漂亮的用户界面和惊人使用体验.这些用户界面工具包可有免费下载,可随意定制的,而且这些 PSD 分层素材文件组 ...

  5. Elasticsearch安装

    在启动或者安装ES之前,需要先下载JDK 1.7以上的版本,对于2.0来说,要求JDK1.8以上. 检查JDK的版本 使用命令: java -version echo $JAVA_HOME 查看JDK ...

  6. 【Android】你应该知道的调试神器----adb

    最近跟着一个前辈在做TV应用,因为不能通过usb连接调试,接触到了adb,突然间觉得自己似乎发现了另外一个世界,借助adb shell命令对应用进行调试,简直方便得不行.更重要的是,这是命令行操作啊! ...

  7. [Core] .NET Core & VS Code 之路(1) Hello World

    目录 相关链接 dotnet命令 VS Code Hello World Web Hello World 总结 其实本篇上个月已经写好, 只是 但是,不忘初心方得始终 相关链接 Learn .NET ...

  8. jquery删除数组中重复元素

    首先定义如下数组: var arr=[0,2,3,5,6,9,2]; 我们可以看到数组中存在重复元素'2'; 最后通过jquery筛选应该得到[0,2,3,5,6,9]; ok,首先我们再定义一个空数 ...

  9. React Native版本升级的正确姿势

    基于React Native(简称:RN)的APP也发布了三个版本了,RN由于两周就会发布一版从最开始项目用的0.29到最近的0.37,做为一个开源项目来说更新真是跟坐火箭般快速,当然对于我们使用的人 ...

  10. WebApp简单制作（后端也可以装逼啦）

    前端越来越吃香的感觉 年后回来,跟之前和几个同事和朋友聊天,发现有两个.net的和一个php的朋友都转到了前端,真是出乎意料.自从之前的webapp兴起后,前端感觉比后端吃香很多,总结朋友们转的原因, ...