Question

我正在尝试创造类似的东西。

有谁知道它中使用了哪种jQuery插件。

看起来非常直接，我似乎无法弄明白。现在我用它来插件

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

以及给定的js代码。我的问题是，我似乎无法使其对其他页面具有动画效果。

感谢您的回复。

Answer 1

动画是通过css translate完成的，并且很少有脚本控制动画期间的行为，没有使用插件！

的CSS：

html {
  overflow-y: hidden;
}

html, body, #wrapper {
  height: 100%;
    width: 100%;
    margin: 0;
}

nav {
    position: fixed;
    z-index: 100;
}

.main-container {
    position: relative;
    width: 100%;
    height: 100%;
}

#wrapper {
    position: absolute;
    top: 0;
    -webkit-transition: -webkit-transform 1.5s cubic-bezier(.8,0,.2,1);
}

.slide0 {-webkit-transform: translateY(0%);}
.slide1 {-webkit-transform: translateY(-100%);}
.slide2 {-webkit-transform: translateY(-200%);}
.slide3 {-webkit-transform: translateY(-300%);}
.slide4 {-webkit-transform: translateY(-400%);}

JS：

var slider = $('.slider'),
    wrapper = $('#wrapper'),
    animating = false,
    current = 0,
    lengthDiv = slider.length,
    delay = 1500;

slider.on('click', function(e){
    var anchor = $(this);
    if(!animating){
        animating = true;
        current = anchor.parent().index();
        wrapper.removeClass().addClass('slide'+current);
        setTimeout(function(){
            animating = false;
        }, delay);
        e.preventDefault();
    }
});

$(document).keydown(function(e){var key = e.keyCode;if(key == 38 || key == 40)e.preventDefault();});
$(document).keyup(function(e){
    if(!animating){
        var key = e.keyCode;
        if(key == 38 && current > 0){
            $(slider[current - 1]).trigger('click');
        }else if(key == 40 && current < lengthDiv - 1){
            $(slider[current + 1]).trigger('click');
        }
    }
});
$(document).mousewheel(function(e, deltaY){
    if(!animating){
        if(deltaY > 0 && current > 0){
            $(slider[current - 1]).trigger('click');
        }else if(deltaY < 0 && current < lengthDiv - 1){
            $(slider[current + 1]).trigger('click');
        }
    }
    return false;
});

CodePen内容滑块

1 个答案: