Emlog博客自定义背景,自动切换

  • 时间:
  • 浏览:94
  • 来源:羽梦娱乐网_提供爱收集资源网技术_爱Q生活网资讯

网站自定义背景,自动切换 让我的网站别出一格。

网站自定义背景,自动切换

须要用到JQuery

Animte CSS动画集可选

HTML主体次要

<div id="showbox" class="set_bg-images"></a><i class="fa fa-cogs"></i> 修改壁纸</div>
    <div id="bg-images_tanchu">
   <div id="changebg" class="changebg">
    <div class="tiphead">设置背景图片<a id="kaiguan"><i class="fa fa-times" ></i></a></div>
    <div class="tipbody" ><ul id="imgul">
    <li onclick="javascript:document.body.style.backgroundImage='url(https://bcsup.sinaapp.com/source/images/bg/1.jpg)';"><i></i></li>
    <li onclick="javascript:document.body.style.backgroundImage='url(https://bcsup.sinaapp.com/source/images/bg/2.jpg)';"><i></i></li>
    <li onclick="javascript:document.body.style.backgroundImage='url(https://bcsup.sinaapp.com/source/images/bg/3.jpg)';"><i></i></li>
    <li onclick="javascript:document.body.style.backgroundImage='url(https://bcsup.sinaapp.com/source/images/bg/4.jpg)';"><i></i></li>
    <li onclick="javascript:document.body.style.backgroundImage='url(https://bcsup.sinaapp.com/source/images/bg/5.jpg)';"><i></i></li>
    <li onclick="javascript:document.body.style.backgroundImage='url(https://bcsup.sinaapp.com/source/images/bg/6.jpg)';"><i></i></li>
    <li onclick="javascript:document.body.style.backgroundImage='url(https://bcsup.sinaapp.com/source/images/bg/7.jpg)';"><i></i></li>
    <li onclick="javascript:document.body.style.backgroundImage='url(https://bcsup.sinaapp.com/source/images/bg/8.jpg)';"><i></i></li>
    </ul></div>
    </div>
    </div>

CSS样式次要

CSS样式

//资源集合
.set_bg-images {
    font-family: \5FAE\8F6F\96C5\9ED1,\5b8b\4f53;
    text-align: center;
    border-radius: 5px;
    border:0px;
    background-color: rgb(92,184,92);
    -webkit-box-shadow:  5px 5px 10px #2F582F;
    box-shadow:  5px 5px 10px #2F582F;
    font-size: 40px;
    width: 320px;
    height: 30px;
    margin:auto;
    z-index: 30;
}
.changebg {
    width: 720px;
  height: 320px;
  top: 30%;
    left:30%;
    margin:-30px -330px;
  position: absolute;
  z-index:9999;
  display: none;
  border-radius: 8px;
  background: rgb(255,255,255);
  -moz-opacity:0.9;
  filter:alpha(opacity=90);
  opacity:0.9;
  box-shadow: 2px 5px 15px rgba(0,0,0,0.8);
}
.kaiguan {
  display: block
}
.changebg>div {
  position: relative;
  overflow: hidden;
  padding: 10px;
}
.changebg .tiphead {
  border-bottom: 1px solid green;
  font-size: 20px;
  font-family: \5FAE\8F6F\96C5\9ED1,\5b8b\4f53;
}
.changebg ul {
}
.changebg ul li {
  width: 140px;
  height: 30px;
  float: left;
  margin: 10px 15px 15px 2px;
  display: inline;
  position: relative;
  background-color: green;
}
.checkit {
  position: absolute;bottombottom: 6px;rightright: 8px;
  color: #0c0;
}
.changebg ul li:nth-child(1){background:url(https://bcsup.sinaapp.com/source/images/bg/tmp/1.jpg)}
.changebg ul li:nth-child(2){background:url(https://bcsup.sinaapp.com/source/images/bg/tmp/2.jpg)}
.changebg ul li:nth-child(3){background:url(https://bcsup.sinaapp.com/source/images/bg/tmp/3.jpg)}
.changebg ul li:nth-child(4){background:url(https://bcsup.sinaapp.com/source/images/bg/tmp/4.jpg)}
.changebg ul li:nth-child(5){background:url(https://bcsup.sinaapp.com/source/images/bg/tmp/5.jpg)}
.changebg ul li:nth-child(6){background:url(https://bcsup.sinaapp.com/source/images/bg/tmp/6.jpg)}
.changebg ul li:nth-child(7){background:url(https://bcsup.sinaapp.com/source/images/bg/tmp/7.jpg)}
.changebg ul li:nth-child(8){background:url(https://bcsup.sinaapp.com/source/images/bg/tmp/8.jpg)}
.bg-images_tanchu{width:30%;height:30%;position:fixed;top:0;left:0;z-index:9997;

JS动画控制

$("#showbox").click(function () {
        $("#bg-images_tanchu").addClass("bg-images_tanchu");
        $("#changebg").addClass("kaiguan");
        $('#changebg').addClass("flipInX animated");
     setTimeout(function(){
        $('#changebg').removeClass("flipInX");
        },30);
    });
$("#kaiguan").click(function () {
    $('#changebg').addClass("flipOutX animated");
     setTimeout(function(){
        $('#changebg').removeClass("flipOutX");
        $("#bg-images_tanchu").removeClass("bg-images_tanchu");
        $("#changebg").removeClass("kaiguan");
        },30);
    });
$('#imgul>li').click(function(){
    $('li').find("i").removeClass("fa fa-check-circle fa-2x checkit");
    $(this).find("i").addClass("fa fa-check-circle fa-2x checkit");
});

本文链接:https://www.mosq.cn/post-78.html

本博客所有文章除特别声明外,均采用CC BY-NC-SA 4.0许可协议。转载请注明出处!