2

我正在寻找一个基于垂直滚动位置显示不透明度的 jQuery 脚本。其中（可见）垂直中间是不透明度 1，但在顶部和底部都淡化为不透明度 0。页面上具有相同类名的多个包装行元素。

.inner.cover
{
   height:20%; 
}
<div class="inner cover" style="opacity:0;">1 Vertical Top</div>
<div class="inner cover" style="opacity:0.333;">2</div>
<div class="inner cover" style="opacity:1;">3 Vertical Middle</div>
<div class="inner cover" style="opacity:0.333;">4</div>
<div class="inner cover" style="opacity:0;">5 Vertical Bottom</div>
<div class="inner cover" style="opacity:0;">6 Below Vertical Bottom</div>
<div class="inner cover" style="opacity:0;">7 Below Vertical Bottom</div>
<div class="inner cover" style="opacity:0;">8 Below Vertical Bottom</div>
<div class="inner cover" style="opacity:0;">9 Below Vertical Bottom</div>

类似这个网站的东西： https ://aibcomms.typeform.com/to/vMZwYQ

有人知道/如果我能找到这样的东西吗？如果可能的话尽量避免插件？

4

2 回答 2

0

也许这个解决方案会适合你。祝你好运。现在，您可以通过项目管理自己需要向上或向下的方向。

'use strict';
jQuery(function($){
  
  var lines = $('.line');
  
  function setStep(step,move){
    
    $('.line').removeClass('active');
    $('.line').removeClass('fog');

    $(lines[step]).addClass('active');
    
    switch (move) { 
      case 'down':  
        if (lines.length-1 > step){
          $(lines[step])            
            .prev()
            .addClass('fog');
          $(lines[step])  
            .next()
            .addClass('fog');
      
          step++;
      
          setTimeout(function(){
            setStep(step,move);
          },2000);
      
        } else {
          setStep(lines.length-1,'up');
        }
        break;
      case 'up':
        if (0 < step){
          
          $(lines[step]).addClass('active');
          
          if (lines.length-1 !== step ){
            $(lines[step])              
              .next()
              .addClass('fog');
          }
          
          $(lines[step])
            .prev()
            .addClass('fog');
      
          step--;
      
          setTimeout(function(){
            setStep(step,move);
          },2000);
      
        } else {
          setStep(0,'down');
        }
        break;
    }
  }
  
  //start item active 0
  setStep(0,'down');
});
.line{
  opacity:0;
  display:none;
  transition: opacity 0.9s;
}
.fog{
  opacity:0.33;  
  display:block;
  transition: opacity 0.9s;
}
.active{
  opacity:1;
  display:block;
  transition: opacity 0.9s; 
}
.inner.cover
{
   height:20%; 
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
  <div class="inner cover line" >1 Vertical Top</div>
<div class="inner cover line" >2</div>
<div class="inner cover line" >3 Vertical Middle</div>
<div class="inner cover line" >4</div>
<div class="inner cover line" >5 Vertical Bottom</div>
<div class="inner cover line" >6 Below Vertical Bottom</div>
<div class="inner cover line" >7 Below Vertical Bottom</div>
<div class="inner cover line" >8 Below Vertical Bottom</div>
<div class="inner cover line" >9 Below Vertical Bottom</div>
</body>
</html>

于 2015-12-08T05:57:32.777 回答
0

也许这个决定会适合你。祝你好运。

'use strict';
jQuery(function($){
  
  var lines = $('.line');
  
  function setStep(step){
    
    $('.line').removeClass('active');
    $('.line').removeClass('fog');

    $(lines[step])
        .addClass('active')
        .prev()
        .addClass('fog');
    
    if (lines.length-1 > step){
      
      $(lines[step])  
        .next()
        .addClass('fog');
      
      step++;
      
      setTimeout(function(){
      setStep(step);
      },2000);
      
    }
    
  }
  
  //start item active 0
  setStep(0);
});
.line{
  opacity:0;
  display:none;
}
.fog{
  opacity:0.33;  
  display:block;
}
.active{
  opacity:1;
  display:block;
}
.inner.cover
{
   height:20%; 
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
  <div class="inner cover line" >1 Vertical Top</div>
<div class="inner cover line" >2</div>
<div class="inner cover line" >3 Vertical Middle</div>
<div class="inner cover line" >4</div>
<div class="inner cover line" >5 Vertical Bottom</div>
<div class="inner cover line" >6 Below Vertical Bottom</div>
<div class="inner cover line" >7 Below Vertical Bottom</div>
<div class="inner cover line" >8 Below Vertical Bottom</div>
<div class="inner cover line" >9 Below Vertical Bottom</div>
</body>
</html>

于 2015-12-07T09:24:07.363 回答