JS丝滑切换博客背景图片

昨天发了一个随笔，看到自己的首页背景切换的及其不自然，遂又置毕业设计于一旁，花费一天时间完善了背景图片切换。

原理是在body里新建一个div盒子，撑起body，使两者的背景图片重叠。先使两者图片一样，然后变换div的透明度（opacity）就可以丝滑切换了。当然要用transition动画实现。

废话不多说直接上代码。

let db = document.getElementById("bg");
const imageslen = images.length-1;
    let imagesrc =0;
    setInterval(    
        function (){    
            imagesrc = images[Math.round(Math.random() * imageslen)];
            document.body.style.backgroundImage = "url(" + imagesrc + ")";
            db.style.opacity = 0;
            setTimeout(function(){
                imagesrc = images[Math.round(Math.random() * imageslen)];
                db.style.backgroundImage = "url(" + imagesrc + ")";
                db.style.opacity = 1;
            }, 10000);            
        }
    ,20000);

上面的是关键代码。

如果你是只是想复制我的模板，我也给出方法。

1. 博客皮肤要一样，如上图
2. 申请开通JS权限。
3. 禁用模板默认CSS不要勾选。
4. 完整复制下方代码到你自己的博客园设置。

页首HTML代码

<div id="bg"></div>

body {
    color: #000;
    background-color:#fec;
    background: url("https://images.cnblogs.com/cnblogs_com/Inn0cent/1918911/o_210119055326town.jpg") fixed ;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: "微软雅黑","Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
    font-size: 12px;
    min-height: 101%;
    padding: 10px 0px;   
}
 /*手机页面的广告*/
#bannerbar,#cnblogs_c1,#cnblogs_c2,#ad_t2{
display:none;   
}

/*主标题*/
#blogTitle h1 {
    font-size: 50px;
    font-family: Consolas;
    font-weight: bold;
    font-style: italic;
    margin-top: 20px;
    margin-bottom: 15px;
}     

/*副标题*/
#blogTitle h2 {
    margin-top: 30px;
    margin-bottom: 15px;
}

/*鼠标滑过效果  位置是副标题下的导航栏六个按钮位置*/
#navList a:hover {
    text-decoration: none;     /*文本装饰*/
    background-color: #fefefe;
    color: #169fe6;
}

/*副标题下导航栏样式*/
#navigator {
background-color:#fefefe;
font-size: 15px;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
height: 50px;
clear: both;
margin-top: 25px;
}

/*侧边栏标题样式*/
.catListTitle {
    margin-top: 21px;
    margin-bottom: 10.5px;
    text-align: left;
    border-left: 10px solid rgba(82, 168, 236, 0.8);
    padding: 5px 0 5px 10px;
    background-color: rgba(245,245,245,0.3);
}

/*可滑动的页面样式设置*/
#home {
opacity: 0.95;
margin: 80px auto;
width: 75%;
min-width: 950px;
background-color: #fefefe;
padding: 30px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.8);
}




/*隐藏滚动条*/
html::-webkit-scrollbar{
        display: none;
    }
html{
    scrollbar-width: none; //兼容火狐
    -ms-overflow-style: none;//兼容ie10+
    
}


/*背景切换*/
#bg {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /*
  为了能够隐藏home
  z-index: -10;*/
  background-position: center 0;
  background-image: url("https://images.cnblogs.com/cnblogs_com/Inn0cent/1918911/o_210119055326town.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  zoom: 1;
 
  opacity:1;
  transition: opacity 3s linear;
  -moz-transition: opacity 3s linear;
  -webkit-transition: opacity 3s linear;
  -o-transition: opacity 3s linear;
}

/*将mainContent放进home*/

#mainContent{
    margin-left: 0;
    width: 70%;
}
#sideBar{
    width: 25%;
}
#mainContent .forFlow{
    margin-left: 0;
}

.postTitle{
    float:none;
    border-left-width: 6px;
    padding-left: 4px;
    border-left-color: rgb(82,168,255);
}

 

<script>
    const images = [
        //图片换成自己的链接
        "https://images.cnblogs.com/cnblogs_com/Inn0cent/1918911/o_210119053554cuteTide.jpg",
        "https://images.cnblogs.com/cnblogs_com/Inn0cent/1918911/o_210119053655bluefat.jpg",
];
    
    var db = document.getElementById("bg");
    //下面是为了可以全屏显示背景图片，要结合之前的css代码
    let home = document.getElementById("home")
    db.onclick = function showornot(){
        if(home.style.visibility === ""){
            home.style.visibility = "hidden";
        }
        else if(home.style.visibility === "hidden"){
            home.style.visibility = "";
        }
        else{
             
        }
    };

    const imageslen = images.length-1;
    let imagesrc =0;
    setInterval(    
        function (){    
            imagesrc = images[Math.round(Math.random() * imageslen)];
            document.body.style.backgroundImage = "url(" + imagesrc + ")";
            db.style.opacity = 0;
            setTimeout(function(){
                imagesrc = images[Math.round(Math.random() * imageslen)];
                db.style.backgroundImage = "url(" + imagesrc + ")";
                //db.style.backgroundImage = document.body.style.backgroundImage;
                db.style.opacity = 1;
            }, 10000);            
        }
    ,20000);
</script>

 

终。

 

参考博客：https://www.cnblogs.com/yhaing/p/7852689.html