Ẩn / hiện Chat Box khá hay

9 thg 3, 2012

Code này có thêm hiệu ứng smooth khá ấn tượng nhưng lạihoàn toàn không dùng đến Jquery hay Mootools, cho nên có thể yên tâm về vấn đề tốc độ. Mình có thiết kế thêm cái button.

Sau đây là code của Chat Box V2 (chèn phía trên thẻ </body>)

<style type='text/css'>
.gb_fixed{position:fixed;top:30px;right:0px;z-index:+10;}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:4px solid #bf3989;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#fff;
padding:0 3px 3px 3px;
}
</style>
<div class='gb_fixed'>
<table cellpadding='0' cellspacing='0' id='hidden_gb2'>
<tr><td><div><a href='javascript:void(0)' onclick='gb_showHideGB()'><b><center>[ Đóng Chat Box ]</center></b></a></div>

Code Shoutbox/Cbox

</td></tr></table></div>
<script type='text/javascript'>
//<![CDATA[
var gb_obj = document.getElementById("hidden_gb2");
var gb_finish = false;

function gb_setInitBehaviour(){
gb_obj.isHidden = true;
gb_setOpacity(gb_obj, "0.01");
}
function gb_setOpacity(obj, opacity){
opacity = opacity.substr(0, 4);
obj.style.opacity = opacity;
obj.style.filter = "alpha(opacity="+(Math.floor(parseFloat(opacity)*100)).toString()+")";
//writex(opacity);
}
function gb_showGB(){
gb_obj.style.display = "block";
gb_changeOpacityTo(1, "");
gb_obj.isHidden = false;
}
function gb_hideGB(){
gb_changeOpacityTo(0.01, "gb_obj.style.display = \"none\"");
gb_obj.isHidden = true;
}
function gb_changeOpacityTo(fin, funcStr){
var init = parseFloat(gb_obj.style.opacity.substr(0, 4));
var d = init <= 0.2 ? 0.04 : init <= 0.6 ? 0.08 : 0.20;
var m = fin>init ? 1 : -1;
var opacity = init + d * m;
if((fin-opacity)*(fin-init)<0){opacity = fin;}
gb_setOpacity(gb_obj, opacity.toString());
if(opacity != fin){setTimeout("gb_changeOpacityTo("+fin.toString()+", '"+funcStr+"')", 50);}
else{eval(funcStr);}
}
function gb_showHideGB(){
if(gb_obj.isHidden){gb_showGB();}
else{gb_hideGB();}
}
function writex(str){
document.getElementById("wx").innerHTML += str + " ";
}
gb_setInitBehaviour();
//]]>
</script>

<div class='gb_fixed' style='z-index:+5'>
<a href='javascript:void(0)' onclick='gb_showHideGB()'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGiOa83A358wV-D9E_jdzv2k4mEqpHxGDwhV7HXbB7CUqCF3ewY9Gp0ab4LH1cw3kyYhSNK_3_DsvrSjIOJAPOrzJ82bL9aRkgJAf5gPiRerHg9QXwZHmGBzWq7TunazX42Pgp2EfUpZs/s1600/cbutton.png'/>
</a></div>