首页 > 代码库 > 一款jquery实现的整屏切换特效
一款jquery实现的整屏切换特效
今天要为大家带来一款由jquery实现的整屏切换特效，在右侧有圆型小标，每点一个切换一屏。当然，你也可以滚动鼠标来切换页面。效果非常好。我们看下效果吧
在线预览 源码下载
html代码：
<div class="wrapper active-page4"> <div class="page page1"> <h2> First page</h2> </div> <div class="page page2"> <h2> Second page</h2> </div> <div class="page page3"> <h2> Third page</h2> </div> <div class="page page4"> <h2> Fourth page</h2> </div> </div> <div class="nav-panel"> <div class="scroll-btn up"> </div> <div class="scroll-btn down"> </div> <nav> <ul> <li data-target="1" class="nav-btn nav-page1"></li> <li data-target="2" class="nav-btn nav-page2"></li> <li data-target="3" class="nav-btn nav-page3"></li> <li data-target="4" class="nav-btn nav-page4 active"></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代码：
‘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 < pages) { currentPage++; if (Modernizr.csstransforms) { manageClasses(); } else { $wrap.animate({ "top": "-" + ((currentPage - 1) * 100) + "%" }, 1000); } } } /********************* ***** MOUSEWHEEL ***** *********************/ $(document).on("mousewheel DOMMouseScroll", function (e) { if (!scrolling) { if (e.originalEvent.wheelDelta > 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
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/6673
一款jquery实现的整屏切换特效
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。