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

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

需用用到JQuery

Animte CSS动画集可选

HTML主体部分

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" style="float: right;color:#333"></i></a></div>

    <div class="tipbody" style="padding-top: 0px;"><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

.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: 60px;

    margin:auto;

    z-index: 500;

}

.changebg {

    width: 720px;

  height: 320px;

  top: 50%;

    left:50%;

    margin:-200px -360px;

  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: 100px;

  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:100%;height:100%;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");

        },800);



    });

$("#kaiguan").click(function () {

    $('#changebg').addClass("flipOutX animated");

     setTimeout(function(){

        $('#changebg').removeClass("flipOutX");

        $("#bg-images_tanchu").removeClass("bg-images_tanchu");

        $("#changebg").removeClass("kaiguan");

        },800);



    });

$('#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");

});

转载请注明出处 AE博客|墨渊 » Emlog网站自定义背景,自动切换