jQuery全屏滚动插件fullPage

<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> 

你可能感兴趣的:(jQuery全屏滚动插件fullPage)