在卷轴上交换图像
在卷轴上交换图像
提问于 2018-08-28 04:59:40
我希望能够交换的徽标图像从一个浅色图像到一个黑暗的图像，当我滚动向上或向下在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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52046891
复制相关文章
相似问题