文档章节

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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

MySQL 乱七八糟的可重复读隔离级别实现

MySQL 乱七八糟的可重复读隔离级别实现 摘要: 原文可阅读 http://www.iocoder.cn/Fight/MySQL-messy-implementation-of-repeatable-read-isolation-levels 「shimohq」欢迎转载,保留摘要,谢...

DemonsI
42分钟前
2
0
Spring源码阅读——2

在阅读源码之前,先了解下Spring的整体架构: 1、Spring的整体架构 1. Ioc(控制反转) Spring核心模块实现了Ioc的功能,它将类与类之间的依赖从代码中脱离出来,用配置的方式进行依赖关系描...

叶枫啦啦
今天
1
0
jQuery.post() 函数格式详解

jquery的Post方法$.post() $.post是jquery自带的一个方法,使用前需要引入jquery.js 语法:$.post(url,data,callback,type); url(必须):发送请求的地址,String类型 data(可选):发送给后台的...

森火
今天
0
0
referer是什么意思?

看看下面这个回答(打不开网页可以把网址复制到搜索栏): https://zhidao.baidu.com/question/577842068.html

杉下
今天
1
0
使用U盘安装CentOS-解决U盘找不到源

1. 使用UltraISO制作CentOS安装盘 如果需要安装带界面的系统,为保证安装顺利,可选择Everything版本的ISO制作安装盘。 2. 在BIOS中选择使用U盘安装 系统启动后,进入安装选择界面,其中有三...

Houor
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部