一款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://***/Article/6673

一款jquery实现的整屏切换特效相关推荐

jquery叠加页片自动切换特效
查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns= ...
html多国语言配置方法,jquery多国语言切换特效
这是一款实现多国语言切换的jquery特效.在这个示例中,通过简单的js代码,实现包括中文和英文在内的7种不同国家语言的切换效果. 使用方法在页面中引入jquery和style.css. HTML结 ...
Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》
http://www.cnblogs.com/lhb25/p/50-jquery-plugins-f.html http://www.cnblogs.com/lhb25/p/must-read-lin ...
html css 圆形按钮仿uc,10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
分享111个JS图片切换特效，总有一款适合您
分享111个图片切换,总有一款适合您下面是文件的名字,我放了一些图片,文章里不是所有的图主要是放不下..., 111个图片切换下载链接:https://pan.baidu.com/s/1iGzOzU ...
jquery图片左右滚动切换js特效
下载地址 jquery图片左右滚动切换特效,左右箭头控制图片滚动的网页特效代码.$(".productshow").xslider({ //.productshow是要移动对象的外 ...
jquery点击缩略图切换视频播放的视频切换焦点图效果
一款由jquery实现的视频切换特效,可以像图片切换那样切换所选择的视频来播放,图片切换相对来说较简单,但视频切换的话就需要播放插件的支持,选择视频缩略图后,上边原来显示大图片的地方是显示一个播放器, ...
前端环形统计_10款jQuery实现的环形百分比图表插件
1.jQuery实现的环形百分比图表插件这是一款非常富有创意的jQuery图表插件特效源码,这款jQuery环形百分比图表插件有以下特点:1.图表外观是环形的,因此也十分特别.2.图表数据有百分比显 ...
一款jQuery满屏自适应焦点图切换特效
一款jQuery满屏自适应焦点图切换特效 ,自适应当前浏览器的宽度,可以作为网站整个大背景的却换效果,很不错的一款不jquery特效. 兼容性没的说直接秒杀了IE6.适用浏览器:IE6.IE7.IE8 ...

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

一款jquery实现的整屏切换特效相关推荐

最新文章

热门文章