滚动浏览不同尺寸的图像

Question

我正在尝试在滚动时更改图像（并且我知道jquery可能有点杂乱，但似乎可以正常工作），但我想：

• 才能拥有不同高度和宽度的图像，而不是所有相同大小的图像（现在）。

• 垂直/水平居中。

这是一个小提琴： https : //jsfiddle.net/postcolonialboy/WTkqn/486/

谢谢！

HTML：

   <div id="contentwrapper">
      <div class="centreme">
        <img src="https://picsum.photos/200/200?image=1" id="animation" />
        <img class="hidden" src="https://picsum.photos/200/200?image=1" />
        <img class="hidden" src="https://picsum.photos/200/200?image=2" />
        <img class="hidden" src="https://picsum.photos/200/200?image=3" />
        <img class="hidden" src="https://picsum.photos/200/200?image=4" />
        <img class="hidden" src="https://picsum.photos/200/200?image=5" />
        <div id="bottommark"></div>
      </div>
    </div>

CSS：

body,
      html {
        height: 7000px;
        margin: 0;
        background-color: grey;
      }

      .hidden {
        position: absolute;
        top: -9999999px
      }

      #bottommark {
        position: absolute;
        bottom: 0;
      }

      #contentwrapper {
        width: 100%;
        height: 100%;
        position: fixed;
      }

      .centreme {
        position: fixed;
        width: 200px;
        /* the image width */
        height: 200px;
        /* the image height */
        top: 50%;
        left: 50%;
        margin-top: -100px;
        /* half the image height */
        margin-left: -100px;
        /* half the image width */
      }

JS：

$(document).ready(function() {
        var a = $(document).height();
        var b = a - $("#bottommark").position().top;
        $(window).scroll(function() {
          var e = $(document).height();
          var f = $(window).scrollTop();
          var c = e - $("#bottommark").position().top - f;
          var d = b / 5;
          $("span").html(c);
          if (c > d * 4) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=1")
          }
          if ((c < d * 4) && (c > d * 3)) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=2")
          }
          if ((c < d * 3) && (c > d * 2)) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=3")
          }
          if (c < d * 2 && c > d * 1) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=4")
          }
          if (c < d) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=5")
          }
        })
      });

Answer 1

我认为用更少的代码会更好。

现在您可以拥有任意数量的图像而无需更改js和css部分

 $(function() { var win = $(window), images = $(".images > div"), img = $(".img > img"); img.attr('src', images.eq(0).data('img')); win.on('scroll', function(event) { var st = win.scrollTop(), num1 = $(document).height() / images.length, num = Math.round(st / num1); img.attr('src', images.eq(num).data('img')); }); }); 

 body, html { height: 8000px; margin: 0; background-color: grey; } .img { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="images"> <div data-img="https://picsum.photos/300/200?image=1"></div> <div data-img="https://picsum.photos/400/300?image=2"></div> <div data-img="https://picsum.photos/200/200?image=3"></div> <div data-img="https://picsum.photos/300/400?image=4"></div> <div data-img="https://picsum.photos/500/300?image=5"></div> </div> <div class="img"><img></div> 

Answer 2

应该在此处将图像居中排序在JSFiddle上 。

有什么变化？

现在， centreme类仅声明了3种样式，即位置（固定），宽度和高度（100％）。 然后，通过定位您的图片（在这种情况下，使用一个附加的类image-tag ），我们可以使用以下声明将其完美地居于其父级中：

.image-tag {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

简而言之，我们将孩子居中，方法是移到父母的确切中心，然后定位孩子， 使其中心位于父母的顶部。