javascript - 如何在 Java Script 中根据屏幕大小替换图像 src

Question

我在 Java Script 的帮助下更改了我的背景图像，并且我同时拥有桌面版图像和移动版图像。

当屏幕尺寸减小到 600px 以下时，我希望我的桌面版图像应该替换为移动版图像。

有人可以帮我解决这个问题，下面是代码片段。

const hbg = document.querySelector('.hbg');
const closeBtn = document.querySelector('.close');

hbg.addEventListener('click', ()=>{
    document.querySelector('.nav').parentNode.classList.add('active');
})

closeBtn.addEventListener('click',()=>{
    document.querySelector('.nav').parentNode.classList.remove('active');
})

const data = [
    {
        image: "images/desktop-image-hero-1.jpg",
        header: "Discover innovative ways to decorate",
    },
    {
        image: "images/desktop-image-hero-2.jpg",
        header: "We are available all across the globe",
    },
    {
        image: "images/desktop-image-hero-3.jpg",
        header: "Manufactured with the best materials",
    }
]

let currentPage = 0;

const slide = () => {
    const prev = document.querySelector('.prev');
    const next = document.querySelector('.next');
    const page = document.querySelector('.main-page');
    const header = document.querySelector('.header');

    const updateContent = () => {
        page.style.backgroundImage = `url(${data[currentPage].image})`;
        header.innerHTML = data[currentPage].header;
    }

    next.addEventListener('click', () => {
        currentPage++;
        if(currentPage > data.length-1){
            currentPage = 0;
        }
        updateContent();
    })

    prev.addEventListener('click', () => {
        currentPage--;
        if(currentPage < 0 ){
            currentPage = data.length - 1;
        }
        updateContent();
    })
};

slide();

标签： javascriptweb-deploymentimage-replacement

Answer 1

您可以使用这样的对象结构。

const data = {
    'desktop' : [
    {
        image: "images/desktop-image-hero-1.jpg",
        header: "Discover innovative ways to decorate",
    },
    {
        image: "images/desktop-image-hero-2.jpg",
        header: "We are available all across the globe",
    },
    {
        image: "images/desktop-image-hero-3.jpg",
        header: "Manufactured with the best materials",
    }],
'tablet' : [
    {
        image: "images/desktop-image-hero-1.jpg",
        header: "Discover innovative ways to decorate",
    },
    {
        image: "images/desktop-image-hero-2.jpg",
        header: "We are available all across the globe",
    },
    {
        image: "images/desktop-image-hero-3.jpg",
        header: "Manufactured with the best materials",
    }],
'mobile' : [
    {
        image: "images/desktop-image-hero-1.jpg",
        header: "Discover innovative ways to decorate",
    },
    {
        image: "images/desktop-image-hero-2.jpg",
        header: "We are available all across the globe",
    },
    {
        image: "images/desktop-image-hero-3.jpg",
        header: "Manufactured with the best materials",
    }]
}

您要查找的事件是“onresize”。检查您的条件并再次分配图像。

如果您不想处理调整大小，您可以简单地

 const updateContent = () => {
if(window.innerWidth <360){

}
else if(window.innerWidth <786){


}
else if()

....
    }

但我建议使用媒体查询并从那里添加您的图像，除非您想要一个仅基于 JS 的解决方案。