Question

当我向上或向下滚动X个像素时，我希望能够将徽标图像从浅色图像交换为深色图像。我也在Wordpress中执行此操作，而不删除图像源中的PHP。当滚动时，我只是在PHP WordPress函数之后添加文件名。这是代码：

HTML

  <img src="<?php echo get_template_directory_uri(); ?>/img/logo_lighttext.svg" id="main-logo">

JAVASCRIPT

  var logoDefault,
      mainLogo = document.getElementById('main-logo');

  logoDefault = mainLogo.src.concat('/img/logo_lighttext.svg');
  mainLogo.src = logoDefault;

  function replaceImage(imageFile) {
    var concatImgFile = mainLogo.src.concat('/img/' + imageFile);
    return concatImgFile;
  }

  function swapImageOnScroll() {
    if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
      mainLogo.src = replaceImage('logo_lighttext.svg');
    } else {
      mainLogo.src = replaceImage('logo_darktext.svg');
    }
  }

  window.addEventListener('scroll', swapImageOnScroll);

它添加了文件名，但是每次我在浏览器中向上或向下滚动时，它都是这种奇怪的行为。

  <img src="http://macbook-pro.local:5757/wp-content/themes/wordpress/img/logo_lighttext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg" alt="Logo" class="main-logo" id="main-logo"></img>

Answer 1

您应该阅读concat()的工作方式。它是串联的，这意味着它将字符串组合在一起。每次滚动时，您将不断构建越来越长的字符串。如果要替换src文本，则只需使用mainLogo.src = 'path'。

var darkImage = '/img/logo_darktext.svg';
var lightImage = '/img/logo_lighttext.svg';
var mainLogo = document.getElementById('main-logo');
var directory = mainLogo.src;

function swapImageOnScroll() {
  if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
    mainLogo.src = directory + lightImage;
  } else {
    mainLogo.src = directory + darkImage;
  }
}

window.addEventListener('scroll', swapImageOnScroll);

滚动交换图像

1 个答案: