javascript - 每次 <h4> 到达窗口中间时运行一个函数来改变图像

Question

我完全被这个问题挡住了。每次我的 h4 到达窗口中间时，我都需要运行一个更改图像的函数。在我的例子中，每个 h4 一张图片，当用户向下滚动或向上滚动时改变它。也就是说，每一个img都会属于一个h4。到目前为止，我已经实现了根据 h4 更改不透明度，但我没有更改图像。这是我的 html:

<div id="column-left">
  <h4 class="active">Targets</h4>
  <h4>Valors</h4>
  <h4>Me </h4>
</div>

<div id="column-right">
    <img src="img/about/map.jpg" class="active" alt="Map"/>
    <img src="img/about/bridge.jpg" alt="Bridge"/>
    <img src="img/about/road.jpg" alt="Road"/>
</div>

这是我的代码:

var findMiddleElement = (function(docElm){
var viewportHeight = docElm.clientHeight,
    elements = $('h4');
$('h4').first().css('opacity','1','important');
return function(e){
    var middleElement;
    if( e && e.type == 'resize' )
        viewportHeight = docElm.clientHeight;

    elements.each(function(){
        var pos = this.getBoundingClientRect().top;
        // if an element is more or less in the middle of the viewport
        if( pos > viewportHeight/2.5 && pos < viewportHeight/1.5 ){
            middleElement = this;
            console.log('I am in the middle');
            changeImage();
            return false; // stop iteration 

        }
    });

    $(middleElement).css({opacity:'1', transition : 'opacity 1s ease-in-out'});

}
})(document.documentElement);

$(window).on('scroll resize', findMiddleElement);

function changeImage(){
    console.log('I am ready to change the image');
    $('img').each(function(){
        $('.active').removeClass('active');
        $(this).addClass('active');
    });
}

这是 fiddle : jsfiddle.net/antoniobarcos/owv1ysto/4/

提前致谢。

Answer 1

您的 changeImage() 只是将 active 类分配给页面上的最后一个图像元素。关于该类在图像元素上的行为，您没有任何 css 规则，因此显然它不会影响任何东西。我看到两种可能的解决方案:

1. 将当前 h4 元素的索引(您正在遍历它们)发送到 changeImage 函数并选择 img:nth-child(idx + 1)元素应用active类。它还需要一些 css，例如 img { display: none; } img.active { 显示: block ； }。在我看来，这不是很灵活。
2. 添加一些属性，例如data-image，图片来源，对应于每个h4元素。然后，右栏中只有一个图像元素，您的代码将类似于以下内容:

/* CHANGE MI IMAGE PLEASE */

var findMiddleElement = (function(docElm) {
  var viewportHeight = docElm.clientHeight,
    elements = $('h4');
  $('h4').first().css('opacity', '1', 'important');
  return function(e) {
    var middleElement;
    if (e && e.type == 'resize') viewportHeight = docElm.clientHeight;

    elements.each(function(idx) {
      var pos = this.getBoundingClientRect().top;
      // if an element is more or less in the middle of the viewport
      if (pos > viewportHeight / 2.5 && pos < viewportHeight / 1.5) {
        middleElement = this;
        console.log('I am in the middle');
        changeImage($(this).data('image'));
        return false; // stop iteration 

      }
    });

    $(middleElement).css({
      opacity: '1',
      transition: 'opacity 1s ease-in-out'
    });

  };
})(document.documentElement);

$(window).on('scroll resize', findMiddleElement);

// You probably don't need a function with one line
function changeImage(src) {
  console.log('I am ready to change the image');
  $('img').attr('src', src);
}

html,
body {
  width: 100%;
  height: 100%;
  font-size: 0;
  margin: 0;
  padding: 0;
  background-color: #000;
}
h4 {
  text-transform: uppercase;
}
.left-column {
  display: inline-block;
  width: 40%;
  height: 100%;
  height: 100%;
  background-color: #000;
  font-size: 16px;
  color: #FFF;
  padding: 20px;
  box-sizing: border-box;
}
.right-column {
  display: inline-block;
  width: 60%;
  height: 100%;
  height: 100%;
  background-color: black;
  position: fixed;
}
.right-column img {
  min-width: 100%;
  min-height: 100%;
}
h4 {
  opacity: .2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-column">
  <h4 data-image="http://i2.cdn.turner.com/cnn/dam/assets/130530161523-100-beaches-crane-beach-horizontal-gallery.jpg"> Targets </h4>

  <p>Nunc vitae turpis sem. Aliquam augue ligula, lacinia quis massa volutpat, fermentum ornare quam. Donec lacinia lorem orci, sit amet facilisis arcu posuere eu. Proin eu mauris ligula. Pellentesque fringilla, nisl eu ullamcorper hendrerit, nisl neque
    auctor turpis, nec placerat justo massa vel erat. Vestibulum quis metus et tellus feugiat hendrerit. Nunc volutpat in turpis id imperdiet. Duis odio massa, maximus at pulvinar eu, semper sed eros. Praesent consectetur eros a neque accumsan, at semper
    libero pharetra. Sed tempor, nunc quis gravida congue, lacus nisi aliquam urna, sed hendrerit risus risus eget ipsum. Vivamus eu consequat risus. Fusce tempus rhoncus odio non gravida. Nunc in ante lacus.</p>
  <h4 data-image="http://www.jeremynoeljohnson.com/wp-content/uploads/2014/12/mountain.jpg"> Valors </h4>

  <p>Maecenas sollicitudin ligula nibh, at rutrum leo sagittis non. Sed quis ornare elit, eget sodales quam. Suspendisse arcu elit, rhoncus vel neque a, faucibus aliquam massa. Mauris tincidunt dui a ipsum suscipit malesuada. Donec lacus justo, porttitor
    vel vehicula in, placerat rutrum mi. Etiam non fermentum massa, nec congue justo. Duis sed ex molestie, varius tellus sit amet, molestie nunc. Phasellus aliquam magna nunc, ut lacinia massa egestas molestie. Nullam fringilla porta massa sed rhoncus.
    Curabitur non ullamcorper odio, eu feugiat urna. Integer a mattis magna, in sollicitudin arcu. Fusce consectetur eu orci at sagittis. Maecenas vel ligula consectetur, placerat nibh quis, gravida augue. In risus ex, volutpat in risus at, efficitur
    congue urna. Sed posuere mollis consectetur.</p>
  <h4 data-image="http://collabcubed.files.wordpress.com/2012/10/high-trestle-trail-bridge_kevin_eberle_booneiowa_collabcubed.jpg"> Me </h4>

  <p>Maecenas sollicitudin ligula nibh, at rutrum leo sagittis non. Sed quis ornare elit, eget sodales quam. Suspendisse arcu elit, rhoncus vel neque a, faucibus aliquam massa. Mauris tincidunt dui a ipsum suscipit malesuada. Donec lacus justo, porttitor
    vel vehicula in, placerat rutrum mi. Etiam non fermentum massa, nec congue justo. Duis sed ex molestie, varius tellus sit amet, molestie nunc. Phasellus aliquam magna nunc, ut lacinia massa egestas molestie. Nullam fringilla porta massa sed rhoncus.
    Curabitur non ullamcorper odio, eu feugiat urna. Integer a mattis magna, in sollicitudin arcu. Fusce consectetur eu orci at sagittis. Maecenas vel ligula consectetur, placerat nibh quis, gravida augue. In risus ex, volutpat in risus at, efficitur
    congue urna. Sed posuere mollis consectetur.</p>
</div>
<div class="right-column">
  <img src="http://i2.cdn.turner.com/cnn/dam/assets/130530161523-100-beaches-crane-beach-horizontal-gallery.jpg" />
</div>

请注意，当您向上滚动时，图像不会更改为第一个，因为第一个 h4 元素不在中间。如果不是所需的行为，您应该修复这种情况。