使用jquery和css面板的旋转木马运动

时间：2018-03-13 01:53:10

标签： javascript jquery css

我有以下UI代码： JS Fiddle

HTML：

<div class="cd-panel-1 from-right">
    <header class="cd-panel-header">
        <a href="#0" class="cd-panel-close"></a>
    </header>
    <div class="cd-panel-container">
        <div class="container">
            <i class="glyphicon glyphicon-menu-left cd-btn-2" id="1-left-slider"></i>

            <p>
            Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum
            </p>
            <i class="glyphicon glyphicon-menu-right cd-btn-3" id="1-right-slider"></i>
        </div>
    </div>
</div>

<div class="cd-panel-2 from-right">
    <header class="cd-panel-header">
        <a href="#0" class="cd-panel-close"></a>
    </header>
    <div class="cd-panel-container">
        <div class="container">
            <i class="glyphicon glyphicon-menu-left cd-btn-3" id="2-left-slider"></i>

            <p>
            Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum
            </p>
            <i class="glyphicon glyphicon-menu-right cd-btn-1" id="2-right-slider"></i>
        </div>
    </div>
</div>

<div class="cd-panel-3 from-right">
    <header class="cd-panel-header">
        <a href="#0" class="cd-panel-close"></a>
    </header>
    <div class="cd-panel-container">
        <div class="container">
            <i class="glyphicon glyphicon-menu-left cd-btn-1" id="3-left-slider"></i>

            <p>
            Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum
            </p>
            <i class="glyphicon glyphicon-menu-right cd-btn-2" id="3-right-slider"></i>
        </div>
    </div>
</div>


<div class="cd-btn">
  <i class="glyphicon glyphicon-plus-sign" id="ic-i">
  </i>
</div>
<div class="cd-btn-2">
  <i class="glyphicon glyphicon-plus-sign" id="ic-i">
  </i>
</div>
<div class="cd-btn-3">
  <i class="glyphicon glyphicon-plus-sign" id="ic-i">
  </i>
</div>

CSS：

*,
*::after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*::after,
*::before {
    content: '';
}
a {
    color: #89ba2c;
    text-decoration: none;
}
.cd-main-content {
    text-align: center;
}
.cd-main-content .cd-btn {
    position: relative;
    display: inline-block;
    background-color: #89ba2c;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn:hover {
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
.cd-main-content .cd-btn-val {
    position: relative;
    display: inline-block;
    background-color: #89ba2c;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn-val:hover {
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
.cd-panel {
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    -webkit-transition: visibility 0s 0.6s;
    -moz-transition: visibility 0s 0.6s;
    transition: visibility 0s 0.6s;
    font-family: 'Open Sans', sans-serif;
    z-index: 9;
}
.cd-panel::after {
    /* overlay layer */

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: pointer;
    -webkit-transition: background 0.3s 0.3s;
    -moz-transition: background 0.3s 0.3s;
    transition: background 0.3s 0.3s;
}
.cd-panel.is-visible {
    visibility: visible;
    -webkit-transition: visibility 0s 0s;
    -moz-transition: visibility 0s 0s;
    transition: visibility 0s 0s;
}
.cd-panel.is-visible::after {
    background: rgba(0, 0, 0, 0.6);
    -webkit-transition: background 0.3s 0s;
    -moz-transition: background 0.3s 0s;
    transition: background 0.3s 0s;
}
/*.cd-panel.is-visible .cd-panel-close::before {
    -webkit-animation: cd-close-1 0.6s 0.3s;
    -moz-animation: cd-close-1 0.6s 0.3s;
    animation: cd-close-1 0.6s 0.3s;
}
.cd-panel.is-visible .cd-panel-close::after {
    -webkit-animation: cd-close-2 0.6s 0.3s;
    -moz-animation: cd-close-2 0.6s 0.3s;
    animation: cd-close-2 0.6s 0.3s;
}*/
@-webkit-keyframes cd-close-1 {
    0%, 50% {
        -webkit-transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}
@-moz-keyframes cd-close-1 {
    0%, 50% {
        -moz-transform: rotate(0);
    }
    100% {
        -moz-transform: rotate(45deg);
    }
}
@keyframes cd-close-1 {
    0%, 50% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}
@-webkit-keyframes cd-close-2 {
    0%, 50% {
        -webkit-transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(-45deg);
    }
}
@-moz-keyframes cd-close-2 {
    0%, 50% {
        -moz-transform: rotate(0);
    }
    100% {
        -moz-transform: rotate(-45deg);
    }
}
@keyframes cd-close-2 {
    0%, 50% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}
.cd-panel-header {
    position: fixed;
    height: 27px;
    width: 3%;
    background-color: transparent;
    z-index: 999;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
    -webkit-transition: top 1.3s 0s;
    -moz-transition: top 1.3s 0s;
    transition: top 1.3s 0s;
}
.from-right .cd-panel-header,
.from-left .cd-panel-header {
    top: -50px;
}
.from-right .cd-panel-header {
    right: 20px;
}
/*.from-left .cd-panel-header {
    left: 0;
}*/
.is-visible .cd-panel-header {
    top: 0;
    -webkit-transition: top 1.3s 0.3s;
    -moz-transition: top 1.3s 0.3s;
    transition: top 1.3s 0.3s;
}
@media only screen and (min-width: 1471px) {
    .cd-panel-header {
        height: 30px;
    }
}
.cd-panel-close {
    position: absolute;
    top: 60%;
    right: 0;
    height: 100%;
    width: 40px;
    /* image replacement */

    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}
.cd-panel-close::before,
.cd-panel-close::after {
     /*close icon created in CSS */
    position: absolute;
    top: 11px;
    left: 5px;
    height: 3px;
    width: 24px;
    background-color: #000;
    /*this fixes a bug where pseudo elements are slighty off position*/

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.cd-panel-close::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.cd-panel-close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/*.no-touch .cd-panel-close:hover {
    background-color: transparent;
}
.no-touch .cd-panel-close:hover::before,
.no-touch .cd-panel-close:hover::after {
    background-color: #ffffff;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
}*/
.no-touch .cd-panel-close:hover::before {
    -webkit-transform: rotate(220deg);
    -moz-transform: rotate(220deg);
    -ms-transform: rotate(220deg);
    -o-transform: rotate(220deg);
    transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}
.cd-panel-container {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    background: #f0a7a7;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
    -webkit-transition-duration: 1.0s;
    -moz-transition-duration: 1.0s;
    transition-duration: 1.0s;
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    transition-delay: 0.3s;
    z-index: 99;
    overflow: scroll;
}
.cd-panel-container::scrollbar {
    display: none;
}
.cd-panel-container::-webkit-scrollbar {
    display: none;
}
.cd-panel-container::-moz-scrollbar {
    display: none;
}
.cd-panel-container::-os-scrollbar {
    display: none;
}
.from-right .cd-panel-container {
    right: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.cd-panel-header a,
.cd-panel-header a:hover {
    color: transparent;
}
/*wobble vertical*/

@-webkit-keyframes hvr-wobble-vertical {
    16.65% {
        -webkit-transform: translateY(18px);
        transform: translateY(18px);
    }
    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@-moz-keyframes hvr-wobble-vertical {
    16.65% {
        -webkit-transform: translateY(18px);
        transform: translateY(18px);
    }
    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@-o-keyframes hvr-wobble-vertical {
    16.65% {
        -webkit-transform: translateY(18px);
        transform: translateY(18px);
    }
    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes hvr-wobble-vertical {
    16.65% {
        -webkit-transform: translateY(18px);
        transform: translateY(18px);
    }
    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
.hvr-wobble-vertical,
.hvr-wobble-vertical:focus,
.hvr-wobble-vertical:active {
    -o-animation-name: hvr-wobble-vertical;
    -ms-animation-name: hvr-wobble-vertical;
    -moz-animation-name: hvr-wobble-vertical;
    -webkit-animation-name: hvr-wobble-vertical;
    animation-name: hvr-wobble-vertical;
    -o-animation-duration: 2s;
    -ms-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -o-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -o-animation-iteration-count: 1;
    -ms-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

jQuery的：

//Sidepanels

jQuery(function($) {
    //open the lateral panel
    $('body').on('click', '.cd-btn', function(event) {
        event.preventDefault();
        $('.cd-panel-1').addClass('is-visible');        
    });
    //close the lateral panel
    $('.cd-panel-1').on('click', function(event) {
        if ($(event.target).is('.cd-panel-close, #1-right-slider, #1-left-slider')) {
            $('.cd-panel-1').removeClass('is-visible');
            $('.cd-panel-1').toggleClass('from-left');
            event.preventDefault();
        }
    });
});

jQuery(function($) {
    //open the lateral panel
    $('.cd-btn-2').on('click', function(event) {
        event.preventDefault();
        $('.cd-panel-2').toggleClass('is-visible');
    });
    //close the lateral panel
    $('.cd-panel-2').on('click', function(event) {
        if ($(event.target).is('.cd-panel-close, #2-right-slider, #2-left-slider')) {
            $('.cd-panel-2').removeClass('is-visible');
            $('.cd-panel-2').toggleClass('from-left');
            event.preventDefault();
        }
    });
});


jQuery(function($) {
    //open the lateral panel
    $('.cd-btn-3').on('click', function(event) {
        event.preventDefault();
        $('.cd-panel-3').toggleClass('is-visible');
    });
    //close the lateral panel
    $('.cd-panel-3').on('click', function(event) {
        if ($(event.target).is('.cd-panel-3') || $(event.target).is('.cd-panel-close, #3-right-slider, #3-left-slider')) {
            $('.cd-panel-3').removeClass('is-visible');
            $('.cd-panel-3').toggleClass('from-left');
            event.preventDefault();
        }
    });
});

我正在尝试使用上面的代码实现旋转木马运动。当我单击右箭头或左箭头时，下一个面板出现，当我关闭面板时，它从左边关闭。

问题是我希望他们只从右边重新打开，目前因为他们从左边关闭，当我们点击它从左边打开的按钮时，会破坏旋转木马的移动。

有没有办法将侧面板从左侧靠近后默认从右侧突出？

0 个答案:

没有答案
相关问题
最新问题