纯js客服插件集qq、旺旺、skype、百度hi、msn

客服插件，集qq、旺旺、skype、百度hi、msn 等 即时通讯工具，并可自己添加支持的通讯工具
客服插件，集qq、旺旺、skype、百度hi、msn 等 即时通讯工具，并可自己添加支持的通讯工具，极简主义，用法自己琢磨。我的博客 http://www.qiling.org<script><br /> //在线客服插件 powered by casejs 极简主义 http://www.mlrzw.cn<br /> function CaseService(caseServiceConfig) { <br /> this.config = caseServiceConfig;<br /> this.elementId = this.config.elementId ;<br /> this.tpl = {<br /> &#039;qq&#039; : {<br /> &#039;href&#039; : &#039;http://wpa.qq.com/msgrd?v=3&uin={#account#}&site=qq&menu=yes&#039;,<br /> &#039;img&#039; : &#039;http://wpa.qq.com/pa?p=2:{#account#}:{#style#}&time={#rand#}&#039;<br /> },&#039;wangwang&#039; : {<br /> &#039;href&#039; : &#039;http://www.taobao.com/webww/ww.php?ver=3&touid={#account#}&siteid=cntaobao&status={#style#}&charset=utf-8&#039;,<br /> &#039;img&#039; : &#039;http://amos.alicdn.com/online.aw?v=2&uid={#account#}&site=cntaobao&s=1&charset=utf-8&#039;<br /> },&#039;skype&#039; : {<br /> &#039;href&#039; : &#039;skype:{#account#}?call&#039;,<br /> &#039;img&#039; : &#039;http://mystatus.skype.com/smallclassic/{#account#}&#039;<br /> },&#039;baiduhi&#039; : {<br /> &#039;href&#039; : &#039;baidu://message/?id={#account#}&#039;,<br /> &#039;img&#039; : &#039;http://tieba.baidu.com/tb/img/hi/hiOnline.gif&#039;<br /> },&#039;msn&#039; : {<br /> &#039;href&#039; : &#039;msnim:chat?contact={#account#}&#039;,<br /> &#039;img&#039; : &#039;http://tieba.baidu.com/tb/img/hi/hiOnline.gif&#039;<br /> }<br /> };<br /> //创建html<br /> this.buildHtml();<br /> <br /> //设置关闭<br /> var that = this;<br /> document.getElementById(this.elementId + &#039;_sBtnClose&#039;).onclick = function(){<br /> that.hide();<br /> };<br /> //设置打开<br /> document.getElementById(this.elementId + &#039;_sBtnOpenArea&#039;).onclick = function(){<br /> that.show();<br /> };<br /> //将html对象赋值给element<br /> this.element = document.getElementById(this.config.elementId);<br /> //判断是否显示<br /> this.config.isOpen ? this.show() : this.hide();<br /> //最后滚动到的位置<br /> this.lastScrollY = 0;<br /> //滚动<br /> this.slide();<br /> } <br /> //显示浮动窗口<br /> CaseService.prototype.show = function() {<br /> document.getElementById(this.elementId + "_sBtnOpenArea").style.display = &#039;none&#039;;<br /> document.getElementById(this.elementId + "_serviceWin").style.display = &#039;block&#039;;<br /> };<br /> //隐藏浮动窗口<br /> CaseService.prototype.hide = function() { <br /> document.getElementById(this.elementId + "_serviceWin").style.display = &#039;none&#039;;<br /> document.getElementById(this.elementId + "_sBtnOpenArea").style.display = &#039;block&#039;;<br /> //如果设置了隐藏的时候关闭 取消事件 并清空 dom<br /> if(this.config.closeAsHide == false){<br /> if(this.interval){<br /> window.clearInterval(this.interval);<br /> }<br /> //清空dom<br /> this.element.innerHTML = &#039;&#039;;<br /> }<br /> };<br /> //滚动浮动窗口<br /> CaseService.prototype.slide = function() {<br /> //自动设置 定时事件<br /> if(!this.interval){<br /> var that = this;<br /> this.interval = window.setInterval(function(){<br /> that.slide();<br /> },1);<br /> }<br /> //获取距离顶部的距离<br /> if (document.documentElement && document.documentElement.scrollTop){<br /> var diffY = document.documentElement.scrollTop;<br /> }else{<br /> var diffY = document.body.scrollTop<br /> }<br /> var percent = .1 * ( diffY - this.lastScrollY); <br /> percent = (percent > 0)?Math.ceil(percent):Math.floor(percent);<br /> this.element.style.top = parseInt(this.element.style.top) + percent + "px";<br /> this.lastScrollY += percent; <br /> };<br /> CaseService.prototype.buildHtml = function(){<br /> //设置关闭事件<br /> var accountList = &#039;&#039;;<br /> for (i = 0;i < this.config.accountArray.length ; i++ ){<br /> accountList += (function(){/* <br /> <div class="sItem"><br /> <label>{#label#}<br /> <a target="_blank" href="{#href#}" title="{#tip#}"><br /> <img src="/static/imghw/default1.png" data-src="{#img#}" class="lazy" alt="{#tip#}" /><br /> <br /> <br /> */}.toString().replace(/^.+?\*|\\(?=\/)|\*.+?$/gi, ""))<br /> //替换链接和状态图片 必须在前边<br /> .replace(/{#href#}/g , this.tpl[this.config.accountArray[i].type].href)<br /> .replace(/{#img#}/g , this.tpl[this.config.accountArray[i].type].img)<br /> //替换其他参数<br /> .replace(/{#label#}/g , this.config.accountArray[i].label)<br /> .replace(/{#account#}/g , this.config.accountArray[i].account)<br /> .replace(/{#style#}/g , this.config.accountArray[i].style)<br /> .replace(/{#tip#}/g , this.config.accountArray[i].tip)<br /> .replace(/{#rand#}/g , this.config.accountArray[i].rand); <br /> };<br /> var css = (function(){/* <br /> <style type="text/css"><br /> .caseService {font-family:&#039;微软雅黑&#039;;text-align: left;}<br /> .caseService .serviceWin {width:168px;height:auto;border:2px solid {#cssColor#};z-index:999999;}<br /> .caseService .sTitle {background:{#cssColor#};padding:8px 10px;font-size:14px;color:#FFF;position:relative}<br /> .caseService .sBtnClose {width: 25px;height: 25px;cursor: pointer;position: absolute;top: 3px;right: 10px;font-size: 25px;line-height: 25px;text-align: right;}<br /> .caseService .sList {font-size: 14px;color: #444;font-size: 13px;line-height: 20px;padding: 10px;background: #FFF}<br /> .caseService .sList .sItem{height:30px}<br /> .caseService .sList label{display:block;width:47%;text-align:right;overflow:hidden;white-space:nowrap;height:30px;float:left}<br /> .caseService .sList a{display:block;width:52%;float:left;overflow:hidden;height:30px;border:0;padding:0;margin:0}<br /> .caseService .sList img{display:inline-block;border:0;padding:0;margin:0}<br /> .caseService .other{border-top:1px dotted #ccc;margin-top:10px;font-size:17px;text-align:center;line-height:28px;padding-top:5px}<br /> .caseService .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}<br /> .caseService .sBtnOpen{font-size: 24px;height: 25px;}<br /> <br /> */}.toString().replace(/^.+?\*|\\(?=\/)|\*.+?$/gi, "")).replace(/{#cssColor#}/g,this.config.color);<br /> <br /> var tpl = (function(){/* <br /> <div id="{#elementId#}" class="caseService" style="{#style#}" ><br /> <div id="{#elementId#}_sBtnOpenArea" class="sBtnOpenArea"><br /> <div class="sBtnOpen">＋<br /> {#closeTitle#}<br /> <br /> <div id="{#elementId#}_serviceWin" class="serviceWin" style="{#width#}"><br /> <div class="sTitle">{#openTitle#}<br /> <div id="{#elementId#}_sBtnClose" class="sBtnClose">×<br /> <br /> <div class="sList"><br /> {#accoundList#}<br /> <div class="other"><br /> {#other#}<br /> <br /> <br /> <br /> <br /> */}.toString().replace(/^.+?\*|\\(?=\/)|\*.+?$/gi, ""));<br /> //拼接Html<br /> serviceWinTpl = css + tpl<br /> .replace(/{#elementId#}/g,this.config.elementId)<br /> .replace(&#039;{#other#}&#039;,this.config.other)<br /> .replace(&#039;{#accoundList#}&#039;,accountList)<br /> .replace(&#039;{#width#}&#039;,this.config.width)<br /> .replace(&#039;{#style#}&#039;,this.config.style)<br /> .replace(&#039;{#closeTitle#}&#039;,this.config.closeTitle)<br /> .replace(&#039;{#openTitle#}&#039;,this.config.openTitle);<br /> document.write(serviceWinTpl);<br /> };<br /> <br /> <br /> //在线客服插件 powered by casejs<br /> new CaseService( {<br /> "elementId": "myServiceWin",<br /> "color": "#266ed2",<br /> "openTitle": "客服中心",<br /> "closeTitle": "联<br/>系<br/>我<br/>们",<br /> "style": "right:0px; top:180px;position: absolute;",<br /> "width": "width:170px;",<br /> "isOpen": "true",<br /> "closeAsHide": "true",<br /> "other": "服务热线<br />0546-8238915",<br /> "accountArray": [<br /> {<br /> "type": "qq",<br /> "label": "在线客服：",<br /> "account": "2095128673",<br /> "tip": "客服当前在线,欢迎与我联系",<br /> "style": "1"<br /> },<br /> {<br /> "type": "qq",<br /> "label": "在线客服：",<br /> "account": "1113635625",<br /> "tip": "客服在线",<br /> "style": "1"<br /> },<br /> {<br /> "type": "qq",<br /> "label": "技术QQ：",<br /> "account": "781787584",<br /> "tip": "点击和我联系",<br /> "style": "7"<br /> },<br /> {<br /> "type": "wangwang",<br /> "label": "技术旺旺：",<br /> "account": "炫彩七零",<br /> "tip": "点击与我联系",<br /> "style": "1"<br /> },<br /> {<br /> "type": "msn",<br /> "label": "技术MSN：",<br /> "account": "王磊芝",<br /> "tip": "点击和我联系",<br /> "style": "0"<br /> },<br /> {<br /> "type": "skype",<br /> "label": "Skype：",<br /> "account": "15154625521",<br /> "tip": "我在线请和我联系",<br /> "style": "0"<br /> }<br /> ]<br /> } );<br /> </script>

AD：真正免费，域名+虚机+企业邮箱=0元