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

Question

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

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

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

这个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>

我的想法是只使用z-index的层次结构放置三个.slide容器，它们在彼此之上填充“空视口空间”，然后使用jQuery的.slideUp()函数向上滑动最顶层的.slide容器。

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

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

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 结束时slideUp 。

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

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

<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 个解决方案

解决方案1
2 已采纳 2016-06-27 00:05:02

解决方案2
0 2016-06-26 23:59:16

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-06-27 00:05:02

解决方案2 0 2016-06-26 23:59:16

解决方案1
2 已采纳 2016-06-27 00:05:02

解决方案2
0 2016-06-26 23:59:16