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 here 处。

发生了什么变化？

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

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

简单地讲，我们将孩子居中，方法是移至父母的确切中心，然后将孩子放置在中心，使它位于父母的顶部。

滚动浏览不同尺寸的图像

2 个答案: