在线客服 浮动

前两天用到在线客服浮动窗口,本来想偷个懒 网上拽下来用,发现 找到的都是table(不是table的不好啦,是某已经把浮窗切好了)的,而且结构很繁琐...只好自己写个(如果有人想看 我在资源上传了压缩文件,比较懒的人可以直接下载)

css:

<mce:style type="text/css"><!--
h5{ margin:0; padding:0; font-family:"宋体"; font-size:12px;}
.kefu{ position:absolute; width:110px; height:150px; border-left:#d3d3d3 solid 1px; border-right:#d3d3d3 solid 1px; display:none;}
.kefu h5{ height:25px; line-height:25px; color:#fff; text-indent:8px;}
.kefu h5.title{ background:url(images/qq-title.gif) no-repeat;}
.kefu h5.foot{ background:url(images/qq-foot.gif) no-repeat;}
.kefu ul.qq_list{ padding:10px 0; width:110px; background-color:#fff;}
.kefu ul.qq_list li{ height:28px; line-height:28px;text-indent:12px;}
.kefu ul.qq_list li a{ text-decoration:none; color:#000;}
.kefu ul.qq_list li img{ vertical-align:-5px;}
.show_none{ display:none;}
--></mce:style><style type="text/css" mce_bogus="1">h5{ margin:0; padding:0; font-family:"宋体"; font-size:12px;}
.kefu{ position:absolute; width:110px; height:150px; border-left:#d3d3d3 solid 1px; border-right:#d3d3d3 solid 1px; display:none;}
.kefu h5{ height:25px; line-height:25px; color:#fff; text-indent:8px;}
.kefu h5.title{ background:url(images/qq-title.gif) no-repeat;}
.kefu h5.foot{ background:url(images/qq-foot.gif) no-repeat;}
.kefu ul.qq_list{ padding:10px 0; width:110px; background-color:#fff;}
.kefu ul.qq_list li{ height:28px; line-height:28px;text-indent:12px;}
.kefu ul.qq_list li a{ text-decoration:none; color:#000;}
.kefu ul.qq_list li img{ vertical-align:-5px;}
.show_none{ display:none;}</style>

页面代码:

<div class="kefu" id="floatWind">
<h5 class="title">在线客服QQ</h5>
<ul class="qq_list">
<li><a target=blank href="tencent://message/?uin=12345678&Site=大拇指&Menu=yes" mce_href="tencent://message/?uin=12345678&Site=大拇指&Menu=yes"><img src="images/1_m.gif" mce_src="images/1_m.gif" width="20" height="20" /> 在线交谈</a></li>
<li><a target=blank href="tencent://message/?uin=12345678&Site=大拇指&Menu=yes" mce_href="tencent://message/?uin=12345678&Site=大拇指&Menu=yes"><img src="images/4_m.gif" mce_src="images/4_m.gif" width="20" height="20" /> 在线交谈</a></li>
<li><a target=blank href="tencent://message/?uin=12345678&Site=大拇指&Menu=yes" mce_href="tencent://message/?uin=12345678&Site=大拇指&Menu=yes"><img src="images/24_m.gif" mce_src="images/24_m.gif" width="20" height="20" /> 在线交谈</a></li>
</ul>
<h5 class="foot">在线客服QQ</h5>
</div>

js:

document.documentElement.scrollTop = 0;
var startY = parseInt(document.getElementById('floatWind').parentNode.scrollHeight);	//设置初始状态
var x=780;		//浮窗左边距
var y = 360;	//规定top值
document.getElementById('floatWind').style.top = startY +'px';	//浮窗初始状态为其父容器底部
var speed= document.documentElement.scrollTop - Math.abs(startY - y);	//与 y 距离
function move(){
document.getElementById('floatWind').style.top = (parseInt(document.getElementById('floatWind').offsetTop) + newSpeed(speed)) +'px';
document.getElementById('floatWind').style.left = (document.documentElement.scrollLeft + x) +'px';
startY = parseInt(document.getElementById('floatWind').offsetTop);
if(Math.abs(speed) == 1){	window.clearInterval(a);}
}
function newSpeed(height){ 	//改变步长
speed= (Math.abs(speed)<1)?1:Math.ceil(height/2);
return speed;
}
document.getElementById('floatWind').style.display = 'block';
var a = window.setInterval('move();',80);	//加载
window.onscroll=function(){
window.clearInterval(a);
speed = document.documentElement.scrollTop - Math.abs(startY - y);
a = window.setInterval('move();',80);
}