在滚动上交换图像?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (53)

当我以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>
提问于
用户回答回答于

如果你想替换src文本,你应该使用mainLogo.src = 'path'

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

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

window.addEventListener('scroll', swapImageOnScroll);

扫码关注云+社区

领取腾讯云代金券