时间戳

首页 > 解决方案 > 在滚动时交换图像

javascript - 在滚动时交换图像

问题描述

当我向上或向下滚动 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>

标签： javascriptwordpress

解决方案

您应该阅读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);

推荐阅读