浮动左侧在线客服js代码

特效描述：js制作 左侧在线客服 float浮动层，js制作左侧在线客服float浮动层

代码部署教程

1. 引入CSS

<link href=”index1.css” rel=”stylesheet” />

2. HTML代码

<style type=”text/css”>
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif,”宋体”;}
/* online */
.QQbox{left:3px;position:absolute;top:145px;width:170px;z-index:999999;}
.QQbox .pss{border:medium none;cursor:pointer;height:136px;left:0;position:absolute;width:26px;}
.QQbox .Qlist{left:0;width:170px;}
.QQbox .Qlist .b{float:left;font-size:1px;height:6px;width:170px;}
.QQbox .Qlist .infobox{background:#BDC5CB;color:#000000;font-weight:800;line-height:14px;padding:5px;text-align:center;}
.QQbox .Qlist .t,.QQbox .Qlist .b,#divMenu{background:url(images/online.png) no-repeat;}
.QQbox .Qlist .t{background-position:-26px top;height:34px;}
.QQbox .Qlist .b{background-position:-26px -68px;height:9px;overflow:hidden;}
.QQbox .Qlist .con{border:1px solid #ccc;border-top:none;border-bottom:none;padding:10px 0;width:168px;background:#fff;}
.QQbox .Qlist .con ul li{padding:5px 5px 0 15px;}
#divMenu{background-position:0 0;width:26px;height:136px;cursor:pointer;}
</style>
<div style=”height:1000px;”></div>
<div class=”QQbox” id=”divQQbox” style=”width:26px;”>
<div class=”Qlist” id=”divOnline” onmouseout=”hideMsgBox(event);” style=”display:none;”>
<div class=”t”></div>
<div class=”infobox”>我们营业的时间<br />9:00-23:00</div>
<div class=”con”>
<ul>
<li><a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=541374203&site=qq&menu=yes”><img border=”0″ src=”http://wpa.qq.com/pa?p=2:541374203:41″ alt=”点击这里给我发消息” title=”点击这里给我发消息”></a></li>
<li>客服热线:15901826010</li>
</ul>
</div>
<div class=”b”></div>
</div>
<div id=”divMenu” onmouseover=”OnlineOver();”></div>
</div><!–QQbox end–>
<script type=”text/javascript”>
/*document.write(“<div class=’QQbox’ id=’divQQbox’ style=’width:26px;’ >”);
document.write(“<div class=’Qlist’ id=’divOnline’ onmouseout=’hideMsgBox(event);’ style=’display : none;’>”);
document.write(“<div class=’t’></div>”);
document.write(“<div class=’infobox’>我们营业的时间<br>9:00-23:00</div>”);
document.write(“<div class=’con’>”);
document.write(“<ul>”);
document.write(‘<li><a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=541374203&site=qq&menu=yes”><img border=”0″ src=”http://wpa.qq.com/pa?p=2:541374203:41″ alt=”点击这里给我发消息” title=”点击这里给我发消息”></a></li>’);
document.write(‘<li>客服热线:15901826010</li>’);
document.write(“</ul>”);
document.write(“</div>”);
document.write(“<div class=’b’></div>”);
document.write(“</div>”);
document.write(“<div id=’divMenu’ onmouseover=’OnlineOver();’></div>”);
document.write(“</div>”);*/
var tips;
var theTop = 145/*这是默认高度,越大越往下*/;
var old = theTop;
function initFloatTips() {
tips = document.getElementById(‘divQQbox’);
moveTips();
};
function moveTips() {
var tt = 50;
if (window.innerHeight) {
pos = window.pageYOffset
}
else if (document.documentElement && document.documentElement.scrollTop) {
pos = document.documentElement.scrollTop
}
else if (document.body) {
pos = document.body.scrollTop;
}
pos = pos – tips.offsetTop + theTop;
pos = tips.offsetTop + pos / 10;
if (pos < theTop) pos = theTop;
if (pos != old) {
tips.style.top = pos + “px”;
tt = 10;
//alert(tips.style.top);
}
old = pos;
setTimeout(moveTips, tt);
}
initFloatTips();
function OnlineOver() {
document.getElementById(“divMenu”).style.display = “none”;
document.getElementById(“divOnline”).style.display = “block”;
document.getElementById(“divQQbox”).style.width = “145px”;
}
function OnlineOut() {
document.getElementById(“divMenu”).style.display = “block”;
document.getElementById(“divOnline”).style.display = “none”;
}
if (typeof (HTMLElement) != “undefined”) //给firefox定义contains()方法，ie下不起作用
{
HTMLElement.prototype.contains = function(obj) {
while (obj != null && typeof (obj.tagName) != “undefind”) { //通过循环对比来判断是不是obj的父元素
if (obj == this) return true;
obj = obj.parentNode;
}
return false;
};
}
function hideMsgBox(theEvent) { //theEvent用来传入事件，Firefox的方式
if (theEvent) {
var browser = navigator.userAgent; //取得浏览器属性
if (browser.indexOf(“Firefox”) > 0) { //如果是Firefox
if (document.getElementById(‘divOnline’).contains(theEvent.relatedTarget)) { //如果是子元素
return; //结束函式
}
}
if (browser.indexOf(“MSIE”) > 0) { //如果是IE
if (document.getElementById(‘divOnline’).contains(event.toElement)) { //如果是子元素
return; //结束函式
}
}
}
/*要执行的操作*/
document.getElementById(“divMenu”).style.display = “block”;
document.getElementById(“divOnline”).style.display = “none”;
document.getElementById(“divQQbox”).style.width = “26px”;
}
</script>

下载地址

立即下载