实例介绍
【实例简介】
【实例截图】
【核心代码】
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery全屏滚动分屏代码</title>
<meta name="keywords" content="">
<mete name="decration" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
<style>
*{ padding:0px; margin:0}
body{ color:#fff; font-family:"Microsoft Yahei"; text-align:center;}
.logo{ border:3px solid #fff; font:bold 24px/100px "Microsoft Yahei"; width:100px; height:100px; position:fixed; top:50px; left:50px; z-index:999;}
.menu{ height:42px; background:rgba(0,0,0,0.6);position:fixed; top:0px; left:0; z-index:998; width:100%; }
.menu li{list-style:none; float:left; display:inline-block; font:16px/42px "Microsoft Yahei";}
.menu li a{ color:#fff; text-decoration:none; text-align:center; display:block; padding:0px 15px}
.menu li.active{ background:#F00;}
</style>
</head>
<body>
<div id="fullpage">
<div class="logo" id="logo">logo</div>
<!--固定导航-->
<ul class="menu">
<Li data-menuanchor="page1" class="active"><a href="#page1">第一页</a></Li>
<Li data-menuanchor="page2"><a href="#page2">第二页</a></Li>
<Li data-menuanchor="page3"><a href="#page3">第三页</a></Li>
<Li data-menuanchor="page4"><a href="#page4">第四页</a></Li>
</ul>
<!--第一个页面-->
<div class="section">第一个页面</div>
<!--第二个页面-->
<div class="section">第二个页面</div>
<!--第三个页面-->
<div class="section">
<div class="slide">第三屏的第一屏</div>
<div class="slide">第三屏的第二屏</div>
<div class="slide">第三屏的第三屏</div>
<div class="slide">第三屏的第四屏</div>
</div>
<!--第四个页面-->
<div class="section">第四个页面</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor:['orange','#5c7ff1','green','#cccccc'], //控制每个section的背景颜色
controlArrow:true, //是否隐藏左右滑块的箭头(默认为true)
verticalCentered: true, //内容是否垂直居中(默认为true)
css3: true, //是否使用 CSS3 transforms 滚动(默认为false)
resize:false, //字体是否随着窗口缩放而缩放(默认为false)
scrolllingSpeed:1000, //滚动速度，单位为毫秒(默认为700)
anchors:['page1','page2','page3','page4'], //定义锚链接(值不能和页面中任意的id或name相同，尤其是在ie下，定义时不需要加#)
lockAnchors:false, //是否锁定锚链接，默认为false。设置weitrue时，锚链接anchors属性也没有效果。
loopBottom:false, //滚动到最底部后是否滚回顶部(默认为false)
loopTop:false, //滚动到最顶部后是否滚底部
loopHorizontal:false,//左右滑块是否循环滑动
autoScrolling:true, // 是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条
scrollBar:false,//是否显示滚动条，为true是一滚动就是一整屏
fixedElements:".logo", //固定元素
menu:".menu",
keyboardScrolling:true, //是否使用键盘方向键导航(默认为true)
keyboardScrolling:true, //页面是否循环滚动（默认为false）
navigation:true, //是否显示项目导航（默认为false）
navigationTooltips:["page1","page2","page3","page4"],//项目导航的 tip
navigationColor:'#fff', //项目导航的颜色
slidesNavigation:true,
});
});
</script>
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论