文档章节

jQuery全屏滚动插件fullPage

 易水寒521
发布于 2015/04/15 15:33
字数 526
阅读 26
收藏 0

<html> 
<head> 
<meta charset="utf-8"> 
<title>jQuery全屏滚动插件fullPage.js演示_dowebok</title> 
<style> 
.wrap { width: 960px; margin: 0 auto; font: 14px Tahoma,Helvetica,Arial,"宋体";} 
p { text-align: center;} 
ul { margin: 0; padding: 0; list-style-type: none; overflow: hidden; zoom: 1;} 
li { float: left; width: 300px; margin: 20px 0 0 20px; display: inline;} 
ul a { float: left; width: 300px; height: 80px; line-height: 80px; color: #333; text-align: center; text-decoration: none; background-color: #eee;} 
</style> 
</head> 
<body> 
<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery全屏滚动插件fullPage.js演示</h1> 
<div> 
<p>fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站。</p> 
<ul> 
<li><a href="index2.html" target="_blank">基本演示</a></li> 
<li><a href="index3.html" target="_blank">背景演示</a></li> 
<li><a href="index4.html" target="_blank">循环演示</a></li> 
<li><a href="index5.html" target="_blank">回调函数演示</a></li> 
<li><a href="index6.html" target="_blank">绑定菜单演示</a></li> 
<li><a href="index7.html" target="_blank">项目导航演示</a></li> 
<li><a href="index8.html" target="_blank">iPhone 5C</a></li> 
<li><a href="http://www.dowebok.com/demo/2014/78/" target="_blank">百度百科史记2013</a></li> 
</ul> </div> 
<style> 
.menu { height: 30px; margin-bottom: 30px; padding: 10px; background-color: #f0f0f0; text-align: center;} 
.menu a { display: inline-block; height: 30px; padding: 0 20px; line-height: 30px; font-size: 14px; color: #333; text-decoration: none;} 
.menu a:hover { color: #000; background-color: #e9e9e9;} 
.menu .cur { background-color: #ddd !important; color: #000;} 
.vad { margin:80px 0 5px; font-family: arial,宋体,sans-serif; text-align:center;} 
.vad a { display:inline-block; height: 36px; line-height: 36px; margin:0 5px; padding:0 50px; font-size:14px; text-align:center; color:#eee; text-decoration:none; background-color:#222;} 
.vad a:hover { color:#fff; background-color:#000;} 
.thead { width: 728px; height: 90px; margin: 0 auto;} 
</style> 
<p> 
<a href="http://www.dowebok.com/" target="_blank">dowebok.com</a> 
<a href="http://www.dowebok.com/77.html" target="_blank">说 明</a> 
<a href="http://www.dowebok.com/77.html" target="_blank">下 载</a> 
</p> </body> </html>

 

 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>fullPage.js — 基本演示_dowebok</title> 
<link rel="stylesheet" href="css/jquery.fullPage.css"> 
<style> 
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} 
</style> 
<script src="js/jquery-1.8.3.min.js"></script> 
<script src="js/jquery-ui-1.10.3.min.js"></script> 
<script src="js/jquery.fullPage.min.js"></script> 
<script> 
$(document).ready(function() { 
$.fn.fullpage({ 
slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'], 
anchors: ['page1', 'page2', 'page3', 'page4'] 
}); 
}); 
</script> 
</head> 

<body> 
<div> 
<h3>第一屏</h3> 
<p>fullPage.js — 基本演示</p> 
</div> 
<div> 
<div><h3>第二屏的第一屏</h3></div> 
<div><h3>第二屏的第二屏</h3></div> 
<div><h3>第二屏的第三屏</h3></div> 
</div> 
<div> 
<h3>第三屏</h3> 
</div> 
<div> 
<h3>第四屏</h3> 
<p>这是最后一屏</p> 
</div> 

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 130
码字总数 120077
作品 0
虹口
私信 提问
让人期待的2011年度最佳 jQuery 插件发布啦

  近日,国外著名博客WDL发布了2011年度最佳 jQuery 插件。jQuery 自2006年发布以来,经过五年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架。jQuery 的易扩展性吸引了来自全...

Yamazaki
2012/05/02
0
0
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
06/26
0
0
19个 jQuery 分页插件和教程,附带实例

在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示。 1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和...

凯文加内特
2014/04/30
0
0
分享一个帮助用户全屏阅读的jQuery插件 - jQuery fullscreen

日期:2012/02/06 来源:GBin1.com 在线演示 在线下载 今天介绍一款帮助网站提高用户体验的jQuery插件 - jQuery fullscreen,它能够帮助网站实现针对阅读内容的全屏显示功能。 这个插件基于F...

gbin1
2012/02/07
0
0
30个创意出色的非常实用的jquery框架插件-(视觉大背景,瀑布流效果)

jQuery是在网页设计师和开发者最近的热门话题之一。人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放...

易达
2012/08/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周三乱弹 —— 程序员左轮轮盘赌注

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享Bon Jovi的单曲《You Give Love a Bad Name》 《You Give Love a Bad Name》- Bon Jovi 手机党少年们想听歌,请使劲儿戳(这...

小小编辑
22分钟前
262
8
oracle 用户密码过期-ORA-28001: 口令已经失效

oracle 用户密码过期-ORA-28001: 口令已经失效 操作步骤: [BEGIN] 2018-10-23 17:25:43Last login: Mon Sep 3 08:46:32 2018 from 10.2.202.12#登陆数据库#(1)在命令窗口中输入:...

诺岚
26分钟前
1
0
[转载]Yarn作业提交流程

1、yarn简述 yarn是一个资源调度平台,负责为运算程序提供服务器运算资源,相当于一个分布式操作系统平台,而mapreduce等运算程序则相当于运行与操作系统之上的应用程序。yarn在hadoop2.x系列...

hnairdb
30分钟前
0
0
WebSocketdemo

WebSocket是html5提供的一种在单个tcp连接上进行全双工通讯的协议。 Http协议是无状态、无连接的、单向的应用层协议,采用了请求响应模型,通信请求智能有客户端发起,服务端对请求做出应答处...

qiang123
36分钟前
1
0
谷歌推迟公布Google+漏洞遭参议员不满

参议院商务委员会主席约翰·图恩和另外两位参议员杰瑞·莫兰和罗杰·维克发出信函,要求谷歌解释推迟披露此问题的原因。信中称:“谷歌如果要保持或重获用户对其服务的信任,就必须在公众和立...

linuxCool
43分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部