一款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

时间： 2024-12-14 14:32:41

一款jquery实现的整屏切换特效的相关文章

jquery叠加页片自动切换特效

查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>jquery叠加页片自动切换特效 - 柯乐义</title><bas

jquery简单的tab切换特效插件jquery-tab demo代码下载

原文:jquery简单的tab切换特效插件jquery-tab demo代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463496178688.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

20款jquery下拉导航菜单特效代码分享

jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应式导航菜单支持手机导航菜单代码 jquery鼠标导航下滑显示图片列表效果 jQuery个性动画二级下拉导航代码 jquery网站下拉菜单制作企业网站导航菜单代码 jQuery游戏网站顶部滑动导航菜单代码 jquery.superfish.js导航菜单插件制作网页无限级下拉菜单代码 jquery hover事件实用的企业网站二级导航菜单样式 j

整屏切换特效

css部分: <style class="cp-pen-styles"> *, *: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%

基于html5整屏切换IDO智能手表页面滚动代码

之前为大大家介绍了一款jquery实现的整屏切换特效.今天分享一款IDO智能手表页面滚动html5代码.这是一款基于jQuery+HTML5实现的页面滚动效果代码.效果图如下: 在线预览   源码下载 部分代码: <div class="main" id="main"> <div class="page page1"> <div class="head-pic"> <div style

10款基于jquery的web前端动画特效

1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要介绍的也是一款基于jQuery的横向手风琴图片切换动画,鼠标滑过图片时即可展开,并且图片上方有文字标题,非常实用. 在线演示 源码下载 2.jQuery/CSS3渐变颜色拾取器 之前我们向大家分享过一款功能十分强大的jQuery颜色拾取器,支持透明度的选取.今天要为大家介绍的同样是一款基于jQuer

9款基于jquery的web前端的特效预览及源码下载

1.高兼容性的jQuery高亮关键词搜索插件 高兼容性的jQuery高亮关键词搜索插件,在搜索框中输入要搜索的的字,下方就会出现当前输入字在文章中出现背景色. 在线演示 源码下载 2.jQuery响应式图片滚动播放插件 jQuery响应式图片滚动播放插件,jQuery响应式图片播放插件是一款具有响应式功能的图片播放插件Flexisel. 在线演示 源码下载 3.基于jquery实现的图片拖动排序jQuery List DragSort插件 基于jquery实现的图片拖动排序jQuery List

基于jQuery环形图标菜单旋转切换特效

分享一款基于jQuery环形图标旋转切换特效.这是一款鼠标点击图标菜单圆形顺时针或者逆时针旋转切换代码.效果图如下: 在线预览   源码下载 实现的代码. js代码: /* 图片地址可以是相对路径或绝对路径:标题和描述可以包含HTML */ var settings = [ {image: 'images/zzsc1.png', heading: '爱编程', description: 'www.w2bc.com'}, { image: 'images/zzsc2.png', heading:

jquery点击缩略图切换视频播放的视频切换焦点图效果

一款由jquery实现的视频切换特效,可以像图片切换那样切换所选择的视频来播放,图片切换相对来说较简单,但视频切换的话就需要播放插件的支持,选择视频缩略图后,上边原来显示大图片的地方是显示一个播放器,每个缩图对应一个视频片段,视频电影站推荐使用. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition