运行一个函数，每次<h4>到达窗口中间时更改图像

Running a function to change images every time <h4> reaches middle of window

本文关键字：窗口 中间 图像 h4 一个 每次 函数 运行      更新时间：2023-09-26

我完全被这个问题阻止了。我需要运行一个函数，每次我的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');
    });
}

这是小提琴：jsfiddle.net/antoniobarcos/owv1ysto/4/

提前谢谢。

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

  1. 将当前h4元素的索引（您正在循环遍历它们）发送到 changeImage 函数，然后选择img:nth-child(idx + 1)元素以应用 active 类。它还需要一些像 img { display: none; } img.active { display: block; } 这样的 css .在我看来，这不是很灵活。
  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元素不在中间。如果这不是期望的行为，则应修复这种情况。

相关文章：