繁体   English   中英

每页加载随机背景图像

[英]Random background images every page load

我不知道我的版本是否可能...我的HTML代码

<div id="AvPinkImages" class="AvImages">
    <div id="AvPinkGalleryImages" class="AvGalleryImages">

    <span class="AvGbtn" style="background-image: url(/uploads/articles/768eec43.jpg); background-size: 100% 100%;" rel="nofollow"></span>

    <span class="AvGbtn" style="background-image: url(/uploads/articles/a79e6b78.jpg); background-size: 100% 100%;" rel="nofollow"></span>  

    <span class="AvGbtn" style="background-image: url(/uploads/articles/27570903.jpg); background-size: 100% 100%;" rel="nofollow"></span>     
    </div>
</div>

这是我的js代码,以获取所选的背景图片

function AvBackgroundImages(e) {
    if (e.target.className == 'AvGbtn') {
        var favImage = e.target.style.backgroundImage;
        setCookie('image', favImage);
        document.body.style.backgroundImage = favImage;
        console.log(favImage);
    }
}
document.onclick = AvBackgroundImages;

function AvBackgroundImage() {
    var favImage = document.body.style.backgroundImage;
    var image = getCookie('image');
    if (image === '') {
        document.body.style.backgroundImage = favImage;
    } else {
      document.body.style.backgroundImage = image;
    }
}
window.onload = function(){
AvBackgroundImage();
};

我要实现的是一个开关按钮( on / off )。 如果每页加载更改背景图像,如果关闭则在背景上显示所选图像?

<style>
    // default image
    img{
        background:  url('off.jpg');
    }
    // on image if IMG has a class on in it
    img.on{
        background:  url('on.jpg');
    }
</style>

<script>
      // based on your value in session storage or local storage
      document.querySelector('img').addClass('on');
</script>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM