部落在前面转过一篇关于在网站上添加QQ联系方式的浮动代码的文章，代码实现的效果比较简单，但是比较实用，今天部落给大家分享一个细化版的QQ联系方式浮动代码，这段代码可以实现关闭浮动框的功能，而且能够根据自己的需要自定义浮动框的样式。
因为这段代码实现的效果需要一些图片，部落在文章的最后将会给出这些图片的下载地址，以供大家自定义修改使用。
代码：
<SCRIPT>
lastScrollY=0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{/*Netscape stuff*/}
//alert(diffY);
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
//alert(lastScrollY);
}
suspendcode12="<DIV id=\"lovexin12\" style=’right:3px;POSITION:absolute;TOP:100px;z-index:100’>";
var recontent=’<table align="left" style="margin-right:3px;width:90px" border="0" cellpadding=0 cellspacing=0 height="32">’ +
’<tr>’ +
’<td style="padding:0;font-size:13px" height="32" ><table style="width:90px" border="0" cellspacing="0" cellpadding="0" height="1">’ +
’<tr>’ +
’<td style="padding:0;font-size:13px; background:none" height="20"><img src="head.gif" border="0" usemap="#MapMapMap"></td>’ +
’</tr>’ +
’<tr>’ +
’<td style="padding:0;font-size:13px;padding-left:1px" background="center_1.gif" height="19">’ +
’<table style="width:90px" border="0" align="center" cellpadding="0" cellspacing="0" height="1">’ +
’<tr>’ +
’<td style="padding:0;background:#F7F3F7;font-size:13px" height="6"></td>’ +
’</tr>’ +
’<tr>’ +
’<td style="padding:0;background:#F7F3F7;font-size:13px" height="1" align="left"><img style="margin:0;padding:0" src="center_2.gif"><span style="text-decoration:none;font-size:14px;font-family:宋体;color:#000000;font-weight:700">在线客服</span></td>’ +
’</tr>’ +
’<tr>’ +
’<td style="padding:0;background:#F7F3F7;font-size:13px" height="39">’ +
’<table border="0" align="left" cellpadding="0" cellspacing="0" style="width:90px">’ +
’<!--begin-->’ +
’<tr>’ +
’<td style="padding-left:0px" align="left" width="10"><img src="center_3.gif"></td>’ +
’<td style="background-color: bgcolor; background-repeat: repeat; background-attachment: scroll; padding: 0; background-position: 0%" height="24" align="left">’ +
’ <a style="text-decoration:none;" href="http://wpa.qq.com/msgrd?V=1&Uin=121212&Site=在线客服&Menu=yes" target="blank"><span style="text-decoration:none;font-family:宋体;font-size:12;color:#000000;text-align:left">客服1</span>’ +
’</td>’ +
’</tr>’ +
’<tr>’ +
’<td style="padding-left:0px" align="left" width="10"><img src="center_3.gif"></td>’ +
’<td style="background-color: bgcolor; background-repeat: repeat; background-attachment: scroll; padding: 0; background-position: 0%" height="24" align="left">’ +
’ <a style="text-decoration:none;" href="http://wpa.qq.com/msgrd?V=1&Uin=121212&Site=在线客服&Menu=yes" target="blank"><span style="text-decoration:none;font-family:宋体;font-size:12;color:#000000;text-align:left">客服2</span>’ +
’</td>’ +
’</tr>’ +
’<!--end-->’ +
’</table></td>’ +
’</tr>’ +
’</table></td>’ +
’</tr>’ +
’<tr>’ +
’<td style="padding:0;font-size:13px" height="1"><a href="http://www.jsbulo.com"><img src="end.gif" border="0"></a></td>’ +
’</tr>’ +
’</table>’ +
’</td>’ +
’</tr>’ +
’</table>’ +
’<map name="MapMapMap" onclick="far_close()" style="cursor:handle">’ +
’<area shape="rect" coords="71,8,102,30" href="#">’ +
’</map>’;
document.write(suspendcode12);
document.write(recontent);
document.write("</div>");
window.setInterval("heartBeat()",1);
function far_close()
{
document.getElementById("lovexin12").innerHTML="";
}
function setfrme()
{
var tr=document.getElementById("lovexin12");
var twidth=tr.clientWidth;
var theight=tr.clientHeight;
var fr=document.getElementById("frame55la");
fr.width=twidth-1;
fr.height=theight-30;
}
//setfrme()
</SCRIPT>
代码所需图片素材：本地下载
