今天要为大家带来一款由jquery实现的整屏切换特效，在右侧有圆型小标，每点一个切换一屏。当然，你也可以滚动鼠标来切换页面。效果非常好。我们看下效果吧
html代码：
<div> <div> <h2> First page</h2> </div> <div> <h2> Second page</h2> </div> <div> <h2> Third page</h2> </div> <div> <h2> Fourth page</h2> </div> </div> <div> <div> </div> <div> </div> <nav> <ul> <li data-target="1"></li> <li data-target="2"></li> <li data-target="3"></li> <li data-target="4"></li> </ul> </nav> </div>
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代码：