QQ在线客服代码，个性、美观的侧边QQ客服代码

发布时间：2018-08-21 11:14:37 所属栏目：政策来源：站长网

导读：超级漂亮的一款QQ在线客服代码，个性、美观的侧边QQ客服代码，从别的网站上扒下来的，并非本人原创，后来又发到网上让CSS高手们做了兼容性修改，可以说接近完美了，QQ在线客服中用到了两张背景图片，自己可以下载。演示代码： !DOCTYPE html PUBLIC -//W3

　　超级漂亮的一款QQ在线客服代码，个性、美观的侧边QQ客服代码，从别的网站上扒下来的，并非本人原创，后来又发到网上让CSS高手们做了兼容性修改，可以说接近完美了，QQ在线客服中用到了两张背景图片，自己可以下载。

　　演示代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>超级漂亮QQ在线客服</title> <style type="text/css" media="screen"> * { margin: 0px; padding: 0px; font-size: 12px; font-family: "宋体", Tahoma; } .clear { clear: both; } DIV { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px } FORM { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px } IMG { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px } UL { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px } OL { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px } /* 烈火網 liehuo.net 欢迎复制,拒绝恶意采集ｌｉｅｈｕｏ．ｎｅｔ */ LI { list-style:none;BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px } .QQPanel { list-style: none;FONT-SIZE: 12px;width:100px; padding:0px;margin: 0px;} .QQPanel ul{ margin: 0 auto; padding: 0} .QQPanel li { margin-top: 4px;} .QQPanel div { margin-top: 4px;} .QQPanel a { display: block; height: 34px; width: 34px; background: url('/uploads/allimg/1105/QQStatus.gif') no-repeat;} /* QQ不在线(默认)状态CSS */ .QQPanel a.qq2 { background-position: -35px 0;} .QQPanel a.qq3 { background-position: -69px 0;} .QQPanel a.qq4 { background-position: -103px 0;} /* QQ在线状态CSS */ .QQPanel .online a.qq1 { background-position: 0 -34px; } .QQPanel .online a.qq2 { background-position: -35px -34px; } .QQPanel .online a.qq3 { background-position: -69px -34px; } .QQPanel .online a.qq4 { background-position: -103px -35px; } /* QQ在线状态鼠标移入时CSS */ .QQPanel .online a.qq1:hover { background-position: 0 bottom; } .QQPanel .online a.qq2:hover { background-position: -35px bottom; } .QQPanel .online a.qq3:hover { background-position: -69px bottom; } .QQPanel .online a.qq4:hover { background-position: -103px bottom; } #sorollDiv1{padding-top:50px;width:130px;height:341px;background:url(/uploads/allimg/1105/logopng1.gif) no-repeat center top;margin:0 auto;} } </style> </head> <body> <div id="sorollDiv1" style="top:150px;right:0px;position:absolute;"> <ul class="QQPanel" id="QQPanel"><li><a href="#" class="qq1"></a><div>烈火学院</div></li><li><a href="#" class="qq2"></a><div>易网大毛</div></li><li><a href="#" class="qq3"></a><div>易网大毛</div></li><li><a href="#" class="qq4"></a><div>易网大毛</div></li> </ul> </div> <script type="text/javascript"> var lastScrollY=0; function heartBeat(){ diffY=document.documentElement.scrollTop; percent=0.1*(diffY-lastScrollY); if(percent>0)percent=Math.ceil(percent); else percent=Math.floor(percent); document.getElementById("sorollDiv1").style.top=parseInt(document.getElementById("sorollDiv1").style.top)+percent+"px"; lastScrollY=lastScrollY+percent; } window.setInterval("heartBeat()",1); </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> <script type="text/javascript"> //<![CDATA[ var online = []; function QQPanel(id, data){ if((this.id = this.get(id)) == null)return false; this.url = 'http://webpresence.qq.com/getonline?Type=1&'; this.header = document.getElementsByTagName('head'); this.items = this.id.childNodes; this.lens = this.items.length; this.index = 0; this.data = data; this.start(); } QQPanel.prototype = { get: function(id){return document.getElementById(id);}, start: function(){ if(this.index >= this.lens)return this.running=false; this.running = true; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = this.url + this.data[this.index] +':&'+(+new Date()); this.header[0].appendChild(script); script.onload = script.onreadystatechange = (function(script){ var _this = this; return (function(){ if(script.readyState){ if(script.readyState.match(/loaded|complete/i)){ _this.show(script) _this = script = null; } }else{ _this.show() _this = script = null; } }); }).call(this, script); }, show: function(s){ this.items[this.index].className = ''; this.items[this.index].title = '我不在线,有事请留言.'; if(online[0] == 1){ this.items[this.index].className = 'online'; this.items[this.index].title = '我在线,有事您招呼.'; } this.items[this.index].firstChild.href = 'tencent://message/?uin='+this.data[this.index++]+'&Site=匆匆过客&Menu=yes'; this.start(); }, reload: function(){ if(this.running)return false; this.index = 0; this.start(); } } var QQOnline = new QQPanel('QQPanel', [32619959, 939170315, 706281436, 503703]); setInterval(function(){//每隔10秒检测一次在线状态 QQOnline.reload(); }, 10000); //]]> </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：济源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!