如何隐藏CHATBOX

跟你们讲哦

这个隐藏CHATBOX的代码

我研究到很久很久了

一直都没有写

是因为我还不是完完全全了解整个代码

不过如果再不写

我真的把之前研究的都忘到光光了>_<"

你们看

这是我之前还特地打印代码出来研究>_<"

好啦

不说废话了>_<"

我先把我记得的都写出来

等我再想到的时候在补贴>_<

我这里有两款

第一款 

隐藏没有背景的CHATBOX，隐藏CBOX的代码里有的添加背景（添加在那个隐藏箱的背景）

不懂你们明白我说什么吗？？>_<

第二款

 隐藏有背景了的CHATBOX

第一款

<style type="text/css">

 #gb{

position:fixed;

top:50px;

z-index:+1000;

 }

 * html #gb{position:relative;}

.gbtab{

height:100px;

width:30px; float:left;

 cursor:pointer;

background:url('开关图片链接') no-repeat;

 }

 .gbcontent{

float:left; border:2px solid #666666;

 background:url(图片链接2) #FFFFFF no-repeat left top; HEIGHT: 480px; 

-moz-border-radius-topleft:15px;

-moz-border-radius-topright:15px;

-moz-border-radius-bottomleft:15px;

-moz-border-radius-bottomright:15px;

padding:10px; }

</style>

<br /> <br />

 <script type="text/javascript">

 function showHideGB(){

var gb = document.getElementById("gb");

 var w = gb.offsetWidth;

 gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

 var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + "px"

 if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

 </script>

<br />

 <div id="gb">

<div class="gbtab" onclick="showHideGB()"></div>

<div class="gbcontent">

CBOX代码

<br />

 <div style="text-align:right">

<a href="javascript:showHideGB()">

<br />

[close]

<br />

 </a>

<br />

 </div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px" </script>

NOTES:

红色的=图片的链接

HIDEBOX背景怎么做？？跟做CBOX背景差不多而已～AGAR AGAR啦XD

top:50px =HIDEBOX最顶端和部落格最顶端之间的距离

A的部分 = 开关的代码

B的部分 = HIDEBOX的背景

C的部分 = HIDEBOX的边框型

其他的 = 我不懂怎么解释了XD

height:100px = 开关图片的高度

width:30px =开关图的宽度

2px solid #666666= HIDEBOX边框的厚度、类型、颜色

#FFFFFF = HIDEBOX的背景颜色 

HEIGHT: 480px =

HIDEBOX背景的长度

（ 不过你放长度的时候必须比原本背景的长度还要小一些 ，就是说如果我的背景是长500px我就在这里填480px , 不要问我为什么>_<" 我也不知道，如果你跟着背景的图片长度的话，你的HIDEBOX下端就会有一部分没有图的 ）

-moz-border-radius-topleft:15px;

-moz-border-radius-topright:15px;

-moz-border-radius-bottomleft:15px;

-moz-border-radius-bottomright:15px;

这些是调HIDEBOX的边框的

EX :

看以下的图

HIDEBOX的角的圆的

如果你们不要圆角的HIDEBOX的话

你们可以把那个代码删掉

换这个

-moz-background-clip:

-moz-initial;

-moz-background-origin:

-moz-initial;

-moz-background-inline-policy: -moz-initial"

EX：

HIDEBOX不是圆角的

 

padding:10px = HIDEBOX与CHATBOX四边的距离

EX ：

30 = 跟着开关图片的宽度（ 如果没有跟的话，就不能看到完整的开关图 ）

EX： 因为没有跟着就变成这样，一半挡着了

第二款

<style type="text/css">
 #gb{
position:fixed;
top:50px;
z-index:+1000;
 }
 * html #gb{position:relative;}
.gbtab{

height:100px;

width:30px; float:left; cursor:pointer;
background:url('开关图片链接') no-repeat;
 }
 .gbcontent{
float:left; border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}


</style>
<br /> <br />
 <script type="text/javascript">
 function showHideGB(){
var gb = document.getElementById("gb");
 var w = gb.offsetWidth;
 gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
 var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px"
 if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
 </script>
<br />
 <div id="gb">
<div class="gbtab" onclick="showHideGB()"></div>
<div class="gbcontent">


你的CBOX代码


<br />
 <div style="text-align:right">
<a href="javascript:showHideGB()">
<br />
[close]
<br />
 </a>
<br />
 </div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px" </script>

NOTES :

height:100px = 开关图片的高度

width:30px =开关图的宽度

30 = 跟着开关图片的宽度（ 如果没有跟的话，就不能看到完整的开关图 ）

top:50px =HIDEBOX最顶端和部落格最顶端之间的距离

2px solid #666666= HIDEBOX边框的厚度、类型、颜色

#F5F5F5 = HIDEBOX的背景颜色

我懂的就只有这些

如果又研究到什么的话

我会再更新的

希望能帮到你们啦^_^

 

---

加油加油

---