我如何实现一个完全工作的图像滚动效果，就像在这个例子

How do I achieve a fully working image scrolling effect like in this example?

本文关键字：滚动 图像 工作 实现 何实现 一个      更新时间：2023-09-26

我偶然发现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>

我的想法是把三个.slide容器填充在"空视口空间"在彼此的顶部，使用z-index的层次结构，然后只是滑动使用jQuery的.slideUp()函数的最上面的.slide容器。

然而，我不确定这是否是一个好方法，因为我不知道如何选择最顶部的容器，以便能够将其淡出。

是否有一个更简单(如果可能的话更模块化)的方法，我应该追求?是否有一个有效的方法(jQuery/CSS选择器)找到最顶层 .slide -层，目前可见?

这是你想要的效果的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的结束。

为了防止硬滚动产生double-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更改为零，同时不会阻止更多的代码在此期间运行。

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

http://alvarotrigo.com/fullPage/

相关文章：