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

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, #66a6b8 20%, #5471b9 80%);background-image: linear-gradient(10deg,#66a6b8 20%, #5471b9 80%);}.wrapper .page.page2{background-color: #f29c54;background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f29c54), color-stop(100%, #db4367));background-image: -webkit-linear-gradient(-315deg, #f29c54 0%, #db4367 100%);background-image: -webkit-linear-gradient(45deg, #f29c54 0%, #db4367 100%);background-image: linear-gradient(45deg,#f29c54 0%, #db4367 100%);}.wrapper .page.page3{background-color: #23af56;background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #23af56), color-stop(100%, #67a79a));background-image: -webkit-linear-gradient(-405deg, #23af56 0%, #67a79a 100%);background-image: -webkit-linear-gradient(315deg, #23af56 0%, #67a79a 100%);background-image: linear-gradient(135deg,#23af56 0%, #67a79a 100%);}.wrapper .page.page4{background-color: #412f2f;background-image: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #412f2f), color-stop(85%, #6b2686));background-image: -webkit-linear-gradient(-430deg, #412f2f 15%, #6b2686 85%);background-image: -webkit-linear-gradient(290deg, #412f2f 15%, #6b2686 85%);background-image: linear-gradient(160deg,#412f2f 15%, #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, 1.2, 0.68, 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;}
js代码：
'use strict';$(document).ready(function () {var $wrap = $(.wrapper),pages = $(.page).length,scrolling = false,currentpage = 1,$navpanel = $(.nav-panel),$scrollbtn = $(.scroll-btn),$navbtn = $(.nav-btn);/********************************** navigate functions **********************************/function manageclasses() {$wrap.removeclass(function (index, css) {return (css.match(/(^|\s)active-page\s+/g) || []).join(' ');});$wrap.addclass(active-page + currentpage);$navbtn.removeclass(active);$(.nav-btn.nav-page + currentpage).addclass(active);$navpanel.addclass(invisible);scrolling = true;settimeout(function () {$navpanel.removeclass(invisible);scrolling = false;}, 1000);}function navigateup() {if (currentpage > 1) {currentpage--;if (modernizr.csstransforms) {manageclasses();} else {$wrap.animate({ top: - + ((currentpage - 1) * 100) + % }, 1000);}}}function navigatedown() {if (currentpage 0 || e.originalevent.detail < 0) {navigateup();} else {navigatedown();}}});/******************************* right navigation ******************************//* nav up/down btn page navigation */$(document).on(click, .scroll-btn, function () {if ($(this).hasclass(up)) {navigateup();} else {navigatedown();}});/* nav circle direct page btn */$(document).on(click, .nav-btn, function () {if (!scrolling) {var target = $(this).attr(data-target);if (modernizr.csstransforms) {$wrap.removeclass(function (index, css) {return (css.match(/(^|\s)active-page\s+/g) || []).join(' ');});$wrap.addclass(active-page + target);$navbtn.removeclass(active);$(this).addclass(active);$navpanel.addclass(invisible);currentpage = target;scrolling = true;settimeout(function () {$navpanel.removeclass(invisible);scrolling = false;}, 1000);} else {$wrap.animate({ top: - + ((target - 1) * 100) + % }, 1000);}}});}); //@ sourceurl=pen.js