时间戳

首页 > 解决方案 > 滚动浏览不同大小的图像

jquery - 滚动浏览不同大小的图像

问题描述

我试图在滚动时更改图像，（我知道 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")
          }
        })
      });

标签： jquerycss

解决方案

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

现在您可以拥有任意数量的图像而无需更改 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>

推荐阅读