一款由jquery实现的整屏切换特效

今天要为大家带来一款由jquery实现的整屏切换特效，在右侧有圆型小标，每点一个切换一屏。当然，你也可以滚动鼠标来切换页面。效果非常好。我们看下效果吧

HTML代码：

rush:xhtml;">

First page

Second page

Third page

Fourth page

css代码：

<div class="jb51code">
<pre class="brush:css;">
,:before,*:after
{
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
margin: 0;
padding: 0;
}

.inner,.nav-panel ul .nav-btn:after
{
content: "";
position: absolute;
top: 50%;
left: 50%;
}

html,body
{
width: 100%;
height: 100%;
overflow: hidden;
}

@media (max-width: 767px)
{
body
{
font-size: 70%;
}
}

.wrapper
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 1.5s;
transition: transform 1.5s;
-webkit-perspective: 3000;
perspective: 3000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.wrapper .page
{
position: relative;
width: 100%;
height: 100%;
-webkit-transform: rotateX(180deg) scale(0.3);
transform: rotateX(180deg) scale(0.3);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
will-change: transform;
}
.wrapper .page h2
{
color: #fff;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
text-transform: uppercase;
font-size: 3em;
}
.wrapper .page.page1
{
background-color: #66a6b8;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(20%,#66a6b8),color-stop(80%,#5471B9));
background-image: -webkit-linear-gradient(-280deg,#66a6b8 20%,#5471B9 80%);
background-image: -webkit-linear-gradient(80deg,#5471B9 80%);
background-image: linear-gradient(10deg,#5471B9 80%);
}
.wrapper .page.page2
{
background-color: #f29c54;
background-image: -webkit-gradient(linear,color-stop(0%,#f29c54),color-stop(100%,#DB4367));
background-image: -webkit-linear-gradient(-315deg,#f29c54 0%,#DB4367 100%);
background-image: -webkit-linear-gradient(45deg,#DB4367 100%);
background-image: linear-gradient(45deg,#DB4367 100%);
}
.wrapper .page.page3
{
background-color: #23af56;
background-image: -webkit-gradient(linear,#23af56),#67A79A));
background-image: -webkit-linear-gradient(-405deg,#23af56 0%,#67A79A 100%);
background-image: -webkit-linear-gradient(315deg,#67A79A 100%);
background-image: linear-gradient(135deg,#67A79A 100%);
}
.wrapper .page.page4
{
background-color: #412F2F;
background-image: -webkit-gradient(linear,color-stop(15%,#412F2F),color-stop(85%,#6B2686));
background-image: -webkit-linear-gradient(-430deg,#412F2F 15%,#6B2686 85%);
background-image: -webkit-linear-gradient(290deg,#6B2686 85%);
background-image: linear-gradient(160deg,#6B2686 85%);
}
.wrapper.active-page1
{
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
}
.wrapper.active-page1 .page.page1
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page2
{
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.wrapper.active-page2 .page.page2
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page3
{
-webkit-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
}
.wrapper.active-page3 .page.page3
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page4
{
-webkit-transform: translateY(-300%);
-ms-transform: translateY(-300%);
transform: translateY(-300%);
}
.wrapper.active-page4 .page.page4
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page5
{
-webkit-transform: translateY(-400%);
-ms-transform: translateY(-400%);
transform: translateY(-400%);
}
.wrapper.active-page5 .page.page5
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page6
{
-webkit-transform: translateY(-500%);
-ms-transform: translateY(-500%);
transform: translateY(-500%);
}
.wrapper.active-page6 .page.page6
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page7
{
-webkit-transform: translateY(-600%);
-ms-transform: translateY(-600%);
transform: translateY(-600%);
}
.wrapper.active-page7 .page.page7
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page8
{
-webkit-transform: translateY(-700%);
-ms-transform: translateY(-700%);
transform: translateY(-700%);
}
.wrapper.active-page8 .page.page8
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page9
{
-webkit-transform: translateY(-800%);
-ms-transform: translateY(-800%);
transform: translateY(-800%);
}
.wrapper.active-page9 .page.page9
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page10
{
-webkit-transform: translateY(-900%);
-ms-transform: translateY(-900%);
transform: translateY(-900%);
}
.wrapper.active-page10 .page.page10
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

.nav-panel
{
position: fixed;
top: 50%;
right: 1em;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1000;
-webkit-transition: opacity 0.5s,-webkit-transform 0.5s cubic-bezier(0.57,1.2,0.68,2.6);
transition: opacity 0.5s,transform 0.5s cubic-bezier(0.57,2.6);
will-change: transform,opacity;
}
.nav-panel.invisible
{
opacity: 0;
-webkit-transform: translateY(-50%) scale(0.5);
-ms-transform: translateY(-50%) scale(0.5);
transform: translateY(-50%) scale(0.5);
}
.nav-panel ul
{
list-style-type: none;
}
.nav-panel ul .nav-btn
{
position: relative;
overflow: hidden;
width: 1em;
height: 1em;
margin-bottom: 0.5em;
border: 0.12em solid #fff;
border-radius: 50%;
cursor: pointer;
-webkit-transition: border-color,-webkit-transform 0.3s;
transition: border-color,transform 0.3s;
will-change: border-color,transform;
}
.nav-panel ul .nav-btn:after
{
width: 100%;
height: 100%;
border-radius: 50%;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.3);
-ms-transform: translateX(-50%) translateY(-50%) scale(0.3);
transform: translateX(-50%) translateY(-50%) scale(0.3);
background-color: #fff;
opacity: 0;
-webkit-transition: -webkit-transform,opacity 0.3s;
transition: transform,opacity 0.3s;
will-change: transform,opacity;
}
.nav-panel ul .nav-btn.active:after,.nav-panel ul .nav-btn:hover:after
{
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.7);
-ms-transform: translateX(-50%) translateY(-50%) scale(0.7);
transform: translateX(-50%) translateY(-50%) scale(0.7);
opacity: 1;
}
.nav-panel ul .nav-btn:hover
{
border-color: yellow;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.nav-panel ul .nav-btn:hover:after
{
background-color: yellow;
}
.nav-panel .scroll-btn
{
position: absolute;
left: 0;
width: 1em;
height: 1em;
border: 0.2em solid #fff;
border-left: none;
border-bottom: none;
cursor: pointer;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: border-color 0.3s;
transition: border-color 0.3s;
}
.nav-panel .scroll-btn.up
{
top: -1.6em;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.nav-panel .scroll-btn.down
{
bottom: -1.2em;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
.nav-panel .scroll-btn:hover
{
border-color: yellow;
}