七零部落格
思则大道至简，疑则谜团重重！
思则大道至简，疑则谜团重重！
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮动QQ(QQ781787584)</title>
</head>
<body>
<script language="javascript">
//widget
var sConfig={
//百变由我 颜色自由定义 推荐 #000 #CCC #C30202 #48ff00
color:'#000',
//QQ浮动窗口的题目
openTitle :"客服中心",
//关闭后右侧的浮动提示窗的题目
closeTitle :"联<br/>系<br/>我<br/>们",
//这里是CSS定义浮动窗口的位置，顶部距离
style:"right:0px; top:150px;position: absolute;",
//这里定义浮动窗口的宽度
width:"width:168px;",
//貌似1-9这里就是QQ在线图片的显示样式
qqStyle:7,
//默认展开：true,默认收缩：false
isOpen:true,
//点击关闭时作为隐藏
closeAsHide:true,
//这里可以编辑html
other:"服务热线<br />400-123-4567<br />QQ-781787584",
//多个QQ用,隔开,QQ和客服名用|隔开
qqList:"售前咨询：|781787584,售前咨询：|781787584,售后咨询：|781787584,技术支持：|781787584,建议/投诉：|781787584,在线购买：|291277891"
};
function CustomWindow(config) {
this.start();
//判断是否显示
config.isOpen ? this.show() : this.hide();
this.lastScrollY = 0;
this.slide();
}
//显示浮动窗口
CustomWindow.prototype.show = function() {
document.getElementById("sBtnOpenArea").style.display = 'none';
document.getElementById("serviceWin").style.display = 'block';
};
//隐藏浮动窗口
CustomWindow.prototype.hide = function() {
document.getElementById("serviceWin").style.display = 'none';
document.getElementById("sBtnOpenArea").style.display = 'block';
//如果设置了隐藏的时候关闭 取消事件 并清空 dom
if(sConfig.closeAsHide == false){
if(this.interval){
window.clearInterval(this.interval);
}
document.getElementById("serviceWinArea").innerHTML = '';
}
};
//滚动浮动窗口
CustomWindow.prototype.slide = function() {
//自动设置 定时事件
if(!this.interval){
this.interval = window.setInterval("mCustom.slide()",1);
}
//获取距离顶部的距离
if (document.documentElement && document.documentElement.scrollTop){
var diffY = document.documentElement.scrollTop;
}else{
var diffY = document.body.scrollTop
}
var percent = .1 * ( diffY - this.lastScrollY);
percent = (percent > 0)?Math.ceil(percent):Math.floor(percent);
document.getElementById("serviceWinArea").style.top = parseInt(document.getElementById("serviceWinArea").style.top) + percent + "px";
this.lastScrollY += percent;
};
CustomWindow.prototype.dd = function(){
alert('ss');
}
CustomWindow.prototype.start = function(){
var itemTpl = (function(){/*
<div class="item">
<span>{#title#}</span>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin={#qq#}&site=qq&menu=yes">
<img src="http://wpa.qq.com/pa?p=2:{#qq#}:{#style#}&time={#qq#}" title="点击这里给我发消息" />
</a>
</div>
*/}.toString().replace(/^.+?*|\(?=/)|*.+?$/gi, ""));
var qqArray= new Array();
var allItemTplHtml = '';
qqArray = sConfig.qqList.split(","); //字符分割
for (i = 0;i < qqArray.length ;i++ ){
var config= new Array();
config = qqArray[i].split("|"); //字符出配置
allItemTplHtml += itemTpl
.replace(/{#qq#}/g,config[1])
.replace(/{#title#}/g,config[0])
.replace(/{#style#}/g,sConfig.qqStyle);
};
var css = (function(){/*
<style type="text/css">
#serviceWinArea {font-family:'微软雅黑'}
#serviceWinArea #serviceWin {width: 168px;height: auto;border: 2px solid {#cssColor#};z-index:999999;}
#serviceWinArea .sTitle {background:{#cssColor#};padding: 8px 10px;font-size: 14px;color: #FFF;position: relative}
#serviceWinArea .sBtnClose {width: 25px;height: 25px;cursor: pointer;position: absolute;top: 3px;right: 10px;font-size: 25px;line-height: 25px;text-align: right;}
#serviceWinArea .sList {font-size: 14px;color: #444;font-size: 13px;line-height: 20px;padding: 10px;background: #FFF}
#serviceWinArea .sList .item{height: 30px}
#serviceWinArea .sList span{display: block;width: 47%;text-align: right;overflow: hidden;white-space: nowrap;height: 30px;float: left}
#serviceWinArea .sList a{display: block;width: 52%;float: left;overflow: hidden;height: 30px;border: 0}
#serviceWinArea .sList a img{border: 0px;display: inline-block;padding: 0;margin: 0}
#serviceWinArea .sList .other{border-top: 1px dotted #ccc;margin-top: 10px;font-size: 17px;text-align: center;line-height: 28px;padding-top: 5px}
#serviceWinArea #sBtnOpenArea {background:{#cssColor#};height: auto;padding: 15px 0;width: 31px;display: none;color: #FFF;font-size: 15px;text-align: center;line-height: 20px;cursor: pointer}
#serviceWinArea .sBtnOpen{font-size: 24px;height: 25px;}
</style>
*/}.toString().replace(/^.+?*|\(?=/)|*.+?$/gi, "")).replace(/{#cssColor#}/g,sConfig.color);
var tpl = (function(){/*
<div id="serviceWinArea" style="{#style#}" >
<div id="sBtnOpenArea" onclick="new CustomWindow.prototype.show()">
<div class="sBtnOpen">＋</div>
{#closeTitle#}
</div>
<div id="serviceWin" style="{#width#}">
<div id="sTitle" class="sTitle">{#openTitle#}
<div onclick="new CustomWindow.prototype.hide()" class="sBtnClose">×</div>
</div>
<div class="sList">
{#qqList#}
<div class="other">
{#other#}
</div>
</div>
</div>
</div>
*/}.toString().replace(/^.+?*|\(?=/)|*.+?$/gi, ""));
serviceWinTpl = css + tpl
.replace('{#other#}',sConfig.other)
.replace('{#qqList#}',allItemTplHtml)
.replace('{#width#}',sConfig.width)
.replace('{#style#}',sConfig.style)
.replace('{#closeTitle#}',sConfig.closeTitle)
.replace('{#openTitle#}',sConfig.openTitle);
document.write(serviceWinTpl);
};
mCustom = new CustomWindow( sConfig );
</script>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>