<style>
body{
background-color: #00c1ff;
-webkit-transition: background-color 400ms ease-in-out;
-ms-transition: background-color 400ms ease-in-out;
-o-transition: background-color 400ms ease-in-out;
-moz-transition: background-color 400ms ease-in-out;
transition: background-color 400ms ease-in-out;
}
.containergaofuxi {
position: fixed;
top: 0;
left: 0;
z-index: -997;
width: 100%;
height: auto;
min-width: 1024px;
min-height: 100%;
}
#output {
opacity: 0.3;
width: 100%;
height: 100%;
-webkit-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.color {
position: fixed;
top: 16px;
right: -3PX;
margin: 0 auto;
margin-left: -60px;
width: 200pt;
height: 20px;}
.color li{
border-radius: 50%;
float: left;
margin: 0 5px;
width: 20px;
height: 20px;
background: #ccc;
box-shadow: 0 0 4px #FFF;
list-style: none;
cursor: pointer;
}
.color li:nth-child(1){
background: #00c1ff;
}
.color li:nth-child(2){
background: #49dd84;
}
.color li:nth-child(3){
background: #ff5a3d;
}
.color li:nth-child(4){
background: #ffac3f;
}
.color li:nth-child(5){
background: #2b7cd3;
}
.color li:nth-child(6){
background: #ff8864;
}
.color li:nth-child(7){
background: #45ada8;
}
.logo{
width: 222px;
height: 70px;
position: fixed;
top: 10px;
left: 50%;
margin-left: -70px;
border: solid 0px #BBBBBB;
-webkit-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.logo:hover{
border: solid 0px #FFF;
background: rgba(255, 255, 255, 0.2);
}
</style>
<script src="http://ftp350469.host533.zhujiwu.cn/js/FSS.js"></script>
<script>
$(function(){
FSS("containergaofuxi", "output");
$(".color li").mouseover(function(event) {
$("body").css("background-color", $(this).css("background-color"));
});
});
</script>
<!-- dom½á11 ¿é×Ô¶¨òå -->
<div id="containergaofuxi" class="containergaofuxi">
<div id="output">
</div>
</div>
<ul class="color">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。