Question

我有一个登陆页面，由三个框架组成，这个框架始终占据视口高度和宽度的100％。我需要在帧之间进行转换，例如“powerpoint presentation”等。用户滚动，第1帧在视口上方滑动，第2帧从视口底部移动到他的位置。我几乎没有javascript / jquery的经验。有一些想法，你可以在代码中看到，但这个想法不起作用。

HTML：

<div class="wrapper" id="wrapper">
    <div class="frame frame-1">
        <!-- Content here -->
    </div>
<div class="frame frame-2">
    <!-- Content here -->
    </div>
    <div class="frame frame-3">
        <!-- Content here -->
    </div>
</div>

CSS：

.wrapper {
    height: 300vh;
}
.frame {
    position: fixed;
    height: 100vh;
    transition: all 1s ease;
}
.frame-1 {
    top: 0vh;
}
.frame-2 {
    top: 100vh;
}
.frame-3 {
    top: 200vh;
}

JS：

var $document = $(document),
    $element1 = $('.frame-1'),
    $element2 = $('.frame-2'),
    $element3 = $('.frame-3');

$(window).scroll(function () {
    if ($(this).scrollTop() >= 50) {
        $element1.css("top", "-100vh");
        $element2.css("top", "0vh");
        $element3.css("top", "100vh");
    } else if ($(this).scrollTop() >= 100) {
        $element1.css("top", "-200vh");
        $element2.css("top", "-100vh");
        $element3.css("top", "0vh");
    } else {
        $element1.css("top", "0vh");
        $element2.css("top", "100vh");
        $element3.css("top", "200vh");
    }
});

Answer 1

这个js可能是你的解决方案

http://alvarotrigo.com/fullPage/

Answer 2

如果您有一定数量的框架，我建议将它们全部放在一个div中，并更改其top值。这样，只需要修改一个值。

像这样：http://jsfiddle.net/xkh4D/10/

（请注意，虽然px使用了vh，但%或其他任何一个单位应该也可以正常工作......但是没有尝试<div id='yo' class='view'> <div> <div class='frame red'></div> <div class='frame green'></div> <div class='frame blue'></div> </div> </div> <input type='button' value='Scroll' onclick='scrollFrame()'/>，但......

<强> HTML

.view {
    position:relative;
    width:300px;
    height:250px;
    border:1px solid black;
    overflow:hidden;
}
.view > div {
    position:absolute;
    width:inherit;
    height:inherit;
    top:0px;
}
.frame {
    width:inherit;
    height:inherit;
}
.red { background-color:#faa }
.green { background-color:#afa }
.blue { background-color:#aaf }

<强> CSS

scrollFrame = function()
{
    var h = $('#yo').height();
    var y = parseFloat($('.view > div').css('top'));

    var hsum = $('.view .frame').length * h;

    console.log('h,y,hsum',h,y,hsum);

    if (hsum-h == -1*y)
        $('.view > div').animate({'top':0});
    else
        $('.view > div').animate({top:y-h},500);
}

<强>的JavaScript

{{1}}

如何制作垂直＆＃34;滑动＆＃34;滚动？

2 个答案: