Question

我偶然发现了http://www.newego.de/，想知道他们在初始页面上使用的“图片幻灯片效果”是如何完成的。

当您向上滚动背景图片更改时，在浏览完所有“简介/欢迎”页面幻灯片后，您将被引导至主网站内容。

我试图出于好奇和学习目的复制效果，因此我最近开始深入研究响应式网页设计，但我有点卡住，不确定我的方法是否是一个很好的解决方案。

This JSFiddle是我试图复制图片滑块的程度。

$(window).bind('mousewheel DOMMouseScroll', function(event){
  if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
    console.log('scrolling down');
  }
  else {
    console.log('scrolling up');
    $('.s1').slideUp('slow');
  }
});

* { margin: 0; padding: 0 }

#menubar {
  width: 100%;
  background-color: orange;
  height: 60px;
}

.slide {
  position: absolute;
  width: 100%;
  top: 60px;
  bottom: 0;
}
.slide.s1 { background-color: green; }
.slide.s2 { background-color: red; }
.slide.s3 { background-color: cornflowerblue; }

.l1 { z-index: 3; }
.l2 { z-index: 2; }
.l3 { z-index: 1; }

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

<html>
  <body>
    <header id="menubar"><p>hi im a header</p></header>
    <section class="slide s1 l1"><p>im the first</p></section>
    <section class="slide s2 l2"><p>im the second</p></section>
    <section class="slide s3 l3"><p>im the third</p></section>
  </body>
</html>

我的想法是将三个.slide容器放在彼此顶部的“空视口空间”中，使用z-index的层次结构，然后向上滑动最顶层的{{1}容器使用jQuery的.slide函数。

但是，我不确定这是不是很好，因为我不知道如何选择最上面的容器才能淡出它。

我应该采用更简单（如果可能更模块化）的方法吗？是否有一种有效的方法（jQuery / CSS选择器）来查找当前可见的最顶层 .slideUp() - 层？

Answer 1

这是你想要的效果的JSFiddle： https://jsfiddle.net/d1xzc4jf/7/

这是相关的jQuery代码：

$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) 
  {
    console.log('scrolling down');
    if ($('.s2').is(':visible')) { $('.s3').slideDown('slow'); }
    else if ($('.s1').is(':visible')) { $('.s2').slideDown('slow'); }
  }
  else 
  {
    console.log('scrolling up');
    if ($('.s3').is(':visible')) { $('.s3').slideUp('slow'); }
    else if ($('.s2').is(':visible')) { $('.s2').slideUp('slow'); }        
  }
});

一种方法是放置所有div并将其display属性设置为none，但当前显示的属性除外。这是一个项目从jQuery slideUp函数向上滑动后发生的事情。您可以检查哪一个是可见的，并在使用您喜欢的任何方法显示下一个时隐藏它。

<强>更新

双滚动但双滑动时发生双滑动的原因是因为visible属性设置在slideDown的开头，但它设置在< slideUp的em> end 。

要防止硬滚动产生双重滑动效果，请设置一个变量以指示动画在开始动画时处于忙碌状态，并在动画结束时使用回调函数将变量设置为不忙，如下所示：

首先，将它放在页面的底部：

<script> var isbusy = 0; </script>

然后将此代码用于滚动功能：

$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
    console.log('scrolling up');
    if ($('.s2').is(':visible')) { 
        if (isbusy == 0) 
        {
            isbusy = 1;
            $('.s3').slideDown('slow', function() {
                isbusy = 0;
            })                
        }
    } 
    else 
    {            
        if ($('.s1').is(':visible')) 
        { 
            if (isbusy == 0)
            {
                isbusy = 1;
                $('.s2').slideDown('slow', function(){
                    isbusy = 0;
                });
            }
        }           
    }
}
else 
{
    console.log('scrolling down');
    if ($('.s3').is(':visible')) 
    {
        if (isbusy == 0) 
        {
            isbusy = 1;
            $('.s3').slideUp('slow', function(){
                isbusy = 0;
            }); 
        }
    }
    else if ($('.s2').is(':visible')) 
    {
        if (isbusy == 0)
        {
            isbusy = 1;
            $('.s2').slideUp('slow', function(){
                isbusy = 0;
            });
        }
    }
  }
});

此代码的作用原因是回调函数在动画结束时执行，因此在动画完成时将isbusy更改为零，同时不会阻止更多代码运行。

Answer 2

我相信你正在寻找下面的滑块。

http://alvarotrigo.com/fullPage/

如何在此示例中实现完全可用的图像滚动效果？

2 个答案: