<!DOCTYPE?HTML>
<html>
<head>
????<title>JQuery?測試</title>
????<link?rel="stylesheet"?type="text/css"?href="css/jquery.fullPage.css">
????<style>
????html,?body?{
????????margin:?0;
????????padding:?0;
????????overflow:hidden;
????????/*Avoid?flicker?on?slides?transitions?for?mobile?phones?#336?*/
????????-webkit-tap-highlight-color:?rgba(0,0,0,0);
????}
????#superContainer?{
????????height:?100%;
????????position:?relative;
????????/*?Touch?detection?for?Windows?8?*/
????????-ms-touch-action:?none;
????????/*?IE?11?on?Windows?Phone?8.1*/
????????touch-action:?none;
????}
????.fp-section?{
????????position:?relative;
????????-webkit-box-sizing:?border-box;?/*?Safari<=5?Android<=3?*/
????????-moz-box-sizing:?border-box;?/*?<=28?*/
????????box-sizing:?border-box;
????}
????.fp-slide?{
????????float:?left;
????}
????.fp-slide,?.fp-slidesContainer?{
????????height:?100%;
????????display:?block;
????}
????.fp-slides?{
????????z-index:1;
????????height:?100%;
????????overflow:?hidden;
????????position:?relative;
????????-webkit-transition:?all?0.3s?ease-out;?/*?Safari<=6?Android<=4.3?*/
????????transition:?all?0.3s?ease-out;
????}
????.fp-section.fp-table,?.fp-slide.fp-table?{
????????display:?table;
????????table-layout:fixed;
????????width:?100%;
????}
????.fp-tableCell?{
????????display:?table-cell;
????????vertical-align:?middle;
????????width:?100%;
????????height:?100%;
????}
????.fp-slidesContainer?{
????????float:?left;
????????position:?relative;
????}
????.fp-controlArrow?{
????????position:?absolute;
????????z-index:?4;
????????top:?50%;
????????cursor:?pointer;
????????width:?0;
????????height:?0;
????????border-style:?solid;
????????margin-top:?-38px;
????}
????.fp-controlArrow.fp-prev?{
????????left:?15px;
????????width:?0;
????????border-width:?38.5px?34px?38.5px?0;
????????border-color:?transparent?#fff?transparent?transparent;
????}
????.fp-controlArrow.fp-next?{
????????right:?15px;
????????border-width:?38.5px?0?38.5px?34px;
????????border-color:?transparent?transparent?transparent?#fff;
????}
????.fp-scrollable?{
????????overflow:?scroll;
????}
????.fp-notransition?{
????????-webkit-transition:?none?!important;
????????transition:?none?!important;
????}
????#fp-nav?{
????????position:?fixed;
????????z-index:?100;
????????margin-top:?-32px;
????????top:?50%;
????????opacity:?1;
????}
????#fp-nav.right?{
????????right:?17px;
????}
????#fp-nav.left?{
????????left:?17px;
????}
????.fp-slidesNav{
????????position:?absolute;
????????z-index:?4;
????????left:?50%;
????????opacity:?1;
????}
????.fp-slidesNav.bottom?{
????????bottom:?17px;
????}
????.fp-slidesNav.top?{
????????top:?17px;
????}
????#fp-nav?ul,
????.fp-slidesNav?ul?{
??????margin:?0;
??????padding:?0;
????}
????#fp-nav?ul?li,
????.fp-slidesNav?ul?li?{
????????display:?block;
????????width:?14px;
????????height:?13px;
????????margin:?7px;
????????position:relative;
????}
????.fp-slidesNav?ul?li?{
????????display:?inline-block;
????}
????#fp-nav?ul?li?a,
????.fp-slidesNav?ul?li?a?{
????????display:?block;
????????position:?relative;
????????z-index:?1;
????????width:?100%;
????????height:?100%;
????????cursor:?pointer;
????????text-decoration:?none;
????}
????#fp-nav?ul?li?a.active?span,
????.fp-slidesNav?ul?li?a.active?span?{
????????background:?#333;
????}
????#fp-nav?ul?li?a?span,
????.fp-slidesNav?ul?li?a?span?{
????????top:?2px;
????????left:?2px;
????????width:?8px;
????????height:?8px;
????????border:?1px?solid?#000;
????????background:?rgba(0,?0,?0,?0);
????????border-radius:?50%;
????????position:?absolute;
????????z-index:?1;
????}
????#fp-nav?ul?li?.fp-tooltip?{
????????position:?absolute;
????????top:?-2px;
????????color:?#fff;
????????font-size:?14px;
????????font-family:?arial,?helvetica,?sans-serif;
????????white-space:?nowrap;
????????max-width:?220px;
????????overflow:?hidden;
????????display:?block;
????????opacity:?0;
????????width:?0;
????}
????#fp-nav?ul?li:hover?.fp-tooltip?{
????????-webkit-transition:?opacity?0.2s?ease-in;
????????transition:?opacity?0.2s?ease-in;
????????width:?auto;
????????opacity:?1;
????}
????#fp-nav?ul?li?.fp-tooltip.right?{
????????right:?20px;
????}
????#fp-nav?ul?li?.fp-tooltip.left?{
????????left:?20px;
????}
?????#section2?.ming
?????{
????????position:?relative;
????????top:?20%;
????????left:10%;
????????width:?100%
?????}
?????#section2?.ming>li
?????{
????????width:?8%;
????????height:?60px;
????????margin:?5px?0?0?5px;
????????list-style-type:?none;
????????text-align:?center;
????????border-radius:?15px;
????????line-height:?60px;
????????transition:?2s;
?????}
?????#section2?.ming>li:first-child
?????{??
????????background-color:?#ffff77;
?????}
?????#section2?.ming>li:nth-of-type(2)
?????{??
????????background-color:?#FFDD55;
?????}
?????#section2?.ming>li:nth-of-type(3)
?????{??
????????background-color:?#DDff77;
?????}
?????#section2?.ming>li:nth-of-type(4)
?????{??
????????background-color:?#77FFCC;
?????}
?????#section2?.ming>li:nth-of-type(5)
?????{??
????????background-color:?#77DDFF;
?????}
????</style>
</head>
<body>
<div?class="sections">
????????<div?class="section"?id="section0">
????????</div>
????????<div?class="section"?id="section1">
????????</div>
????????<div?class="section"?id="section2">
????????????<ul?class="ming">
????????????????<li>Html&Css</li>
????????????????<li>javascript</li>
????????????????<li>jquery</li>
????????????????<li>Html5&Css3</li>
????????????????<li>tools</li>
????????????</ul>
????????</div>
????????<div?class="section"?id="section3">
????????</div>
????</div>
????<script?type="text/javascript"?src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
????<script?type="text/javascript"?src="js/index.js"></script>
????<script?type="text/javascript"?src="js/jquery.fullPage.min.js"></script>
????<script?type="text/javascript">
????$(function(){
????????$(".sections").fullpage({
????????????navigation:?true,
????????????navigationPosition:?'left',
????????????anchors:['page1','page2','page3','page4',],
????????????verticalCentered:false,
????????????afterLoad?:?function(){
????????????????????????$('#section2?.ming>li:first-child').css('width','68%');
????????????????????????$('#section2?.ming>li:nth-of-type(2)').css('width','58%');
????????????????????????$('#section2?.ming>li:nth-of-type(3)').css('width','48%');
????????????????????????$('#section2?.ming>li:nth-of-type(4)').css('width','38%');
????????????????????????$('#section2?.ming>li:nth-of-type(5)').css('width','28%');
????????????????}
????????????????????
????????});
????});
????</script>
</html>
2016-09-02
找到問題了.