时间戳

首页 > 解决方案 > 在滚动javascript上更改多个图像背景

javascript - 在滚动javascript上更改多个图像背景

问题描述

我希望有人能帮我解决这个问题，我不擅长 javascript，也不擅长 html n css。

我想用渐变效果改变滚动的图像背景，我为此创建了小提琴。

 var $nav = $('nav');
 var winh = window.innerHeight;
 var scrollPos = 0;
 $(window).on('scroll', function() {

   scrollPos = Number($(window).scrollTop().toFixed(1));
   page = Math.floor(Number(scrollPos / winh) + 1); 
   if (page == 1) {
     $('.test1').addClass('active');
     $('.test2').removeClass('active');
     $('.test3').removeClass('active');
   } else if (page == 2) {
     $('.test1').removeClass('active');
     $('.test2').addClass('active');
     $('.test3').removeClass('active');
   } else if (page == 3) {
     $('.test1').removeClass('active');
     $('.test2').removeClass('active');
     $('.test3').addClass('active');
   } else {
     $('.test1').removeClass('active');
     $('.test2').removeClass('active');
     $('.test3').removeClass('active');
   }
   $nav.html("Page# " + page + " window position: " + scrollPos);

 });
nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 70px;
  width: 100%;
  background-color: silver;
  z-index: 999;
  text-align: center;
  font-size: 2em;
  opacity: 0.8;
}

.media {
  min-height: 100vh;
  width: 100%;
  max-width: 100vh;
  margin-left: auto;
  margin-right: auto;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, visibility 1s 1s;
}

.media.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s, visibility 1s 0s;
}

.media .image {
  position: fixed;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
}

.media .caption {
  margin-top: 50vh;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  display: inline-block;
  position: relative;
  z-index: 10000;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav></nav>
<figure class="media test1" data-media-action="modal">
  <div class="image">
    <img src="https://static01.nyt.com/images/2017/05/31/world/australia/outback-photo-essay-ss-slide-08UQ/outback-photo-essay-ss-slide-08UQ-superJumbo.jpg" />
  </div>
  <figcaption class="caption" itemprop="caption description">
    <div class="caption-text">

      Harvesting kangaroos for meat at Plumbago Station, South Australia.

    </div>
  </figcaption>
</figure>


<figure class="media test2" data-media-action="modal">
  <div class="image">
    <img src="https://static01.nyt.com/images/2017/05/31/world/australia/outback-photo-essay-ss-slide-TYTD/outback-photo-essay-ss-slide-TYTD-superJumbo.jpg" />
  </div>
  <figcaption class="caption" itemprop="caption description">

    <div class="caption-text">

      Abandoned cars littered an opal mining site in Coober Pedy.

    </div>
  </figcaption>
</figure>

<figure class="media test3" data-media-action="modal">
  <div class="image">
    <img src="https://static01.nyt.com/images/2017/05/31/world/australia/outback-photo-essay-ss-slide-EE5O/outback-photo-essay-ss-slide-EE5O-superJumbo.jpg" />
  </div>
  <figcaption class="caption" itemprop="caption description">
    <div class="caption-text">
      FERAL DOGS THAT WERE KILLED BY RANCHERS SEEKING TO PROTECT LIVESTOCK IN TAMBO, QUEENSLAND.
    </div>
  </figcaption>
</figure>

这是问题所在：

  1. 我认为我的代码效率不高，如果我有 20 张或更多图片会有问题吗？请建议更有效的代码。

  2. 页面加载时图像不显示，您需要先滚动。每次刷新页面时如何使图像加载？

  3. 为什么最后一张图片与第一张和其他图片的高度不同？

谢谢，

标签： javascriptjqueryhtmlcss

解决方案

1）是的，代码效率不高，而不是使用 if else 你可以编写一个循环来显示图像！您可以将图像存储在数据库中并使用查询检索它。您可以使用简单的 SQL 数据库和任何脚本语言来获取我建议使用 PHP 的数据

2) 你的第二个问题的解决方案是使用 jquery 的 load() 方法而不是使用 on() 方法

3）我看不到小提琴的输出请分享截图

推荐阅读