jquery实现的整屏切换特效
来源：互联网 发布：附近淘宝店 编辑：程序博客网 时间：2024/06/06 00:50
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.jsvia:http://www.w2bc.com/Article/6673
0 0
- jquery实现的整屏切换特效
- jquery实现可切换主题的注册表单特效
- 新闻切换特效的实现
- jquery 图片切换特效
- 常见特效的jquery实现
- jquery实现百度应用游戏排行图文切换特效
- 使用jQuery实现点击左右滑动切换特效
- DOM特效之tab切换的实现
- 多张图片的左右切换特效，实现循环切换
- jQuery 切换特效/动画效果
- 屏幕下雪特效的jQuery实现
- jquery实现的Tabs切换
- jQuery实现tab的切换
- CCScene切换的特效
- jquery实现LED屏时间倒计时特效
- jquery实现动画特效
- Flash和JS实现的图片幻灯片切换特效
- Flash和JS实现的图片幻灯片切换特效
- ORACLE 获取同期数据的两种方法
- 传球游戏
- SQL_Oracle 表中ID字段的自动递增
- HDOJ 1283 最简单的计算机（水）
- 【JavaScript】变量冲突是可以通过编译的
- jquery实现的整屏切换特效
- 从SD上加载jar并运行
- QTreeWidget实现动态加载本地文件系统
- 一位博士生的返乡笔记：近年情更怯，春节回家看什么
- Android事件处理机制系列-----------Touch事件处理机制
- WEB页面离开时销毁对象
- 口袋衣橱项目开始做
- CF 518E(Arthur and Questions-贪心)
- 菊花加载
