文档章节

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
虹口
私信 提问
前端开发者值得一看的 8 款实用 jQuery 插件

作为多年的WEB前端开发者来说,我用过非常多的jQuery插件,不是我懒,的确是因为jQuery插件使用太方便了,大大减少了我的工作时间。本文是我使用过的几款非常出色的jQuery插件,我想很有必要...

yykj
2012/11/20
11K
14
2011年度最佳 jQuery 插件发布

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

红薯
2011/11/25
5.9K
16
让人期待的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
50 个 jQuery 插件可将你的网站带到另外一个高度

Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展。在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚...

oschina
2014/06/10
12.9K
39

没有更多内容

加载失败,请刷新页面

加载更多

搭建Git服务器

Windows平台下搭建Git服务器 1、在自己电脑搭建Git服务器,且只有自己的电脑能访问。 即使是自己一个人在开发代码也强烈建议使用Git来管理代码。当然也可以只使用本地Git仓库的形式来管理代码...

国仔饼
10分钟前
0
0
百万并发下的Nginx优化,看这一篇就够了!

本文作者主要分享在 Nginx 性能方面的实践经验,希望能给大家带来一些系统化思考,帮助大家更有效地去做 Nginx。 优化方法论 我重点分享如下两个问题: 保持并发连接数,怎么样做到内存有效使...

JackFace
12分钟前
0
0
中学生读《皮囊》有感相关体会4300字[图]

中学生读《皮囊》有感相关体会4300字[图]: 我们时常知道从哪里来,但很少知道自己要到哪里去,因为我们经常不认识自己,又怎能看见自己皮囊下最真实的面目?——题记 满怀欣喜去迎接五一,应...

原创小博客
21分钟前
2
0
java_集合

非并发集合 并发集合

grace_233
23分钟前
1
0
正则表达式匹配不包含

^((?!xxx).)*$

安小乐
34分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部