超级漂亮的一款QQ在线客服代码，个性、美观的侧边QQ客服代码，从别的网站上扒下来的，并非本人原创，后来又发到网上让CSS高手们做了兼容性修改，可以说接近完美了，QQ在线客服中用到了两张背景图片，自己可以下载。 演示代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /> <title>超级漂亮QQ在线客服</title><br /> <style type="text/css" media="screen"><br /> * {<br /> margin: 0px;<br /> padding: 0px;<br /> font-size: 12px;<br /> font-family: "宋体", Tahoma;<br /> }<br /> .clear {<br /> clear: both;<br /> }<br /> DIV {<br /> 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<br /> }<br /> FORM {<br /> 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<br /> }<br /> IMG {<br /> 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<br /> }<br /> UL {<br /> 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<br /> }<br /> OL {<br /> 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<br /> }<br /> /* 烈火網 liehuo.net 欢迎复制,拒绝恶意采集 ｌｉｅｈｕｏ．ｎｅｔ */<br /> LI {<br /> 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<br /> }<br /> .QQPanel { list-style: none;FONT-SIZE: 12px;width:100px; padding:0px;margin: 0px;}<br /> .QQPanel ul{ margin: 0 auto;<br /> padding: 0}<br /> .QQPanel li { margin-top: 4px;}<br /> .QQPanel div { margin-top: 4px;}<br /> .QQPanel a { display: block; height: 34px; width: 34px; background: url('/uploads/allimg/1105/QQStatus.gif') no-repeat;}<br /> /* QQ不在线(默认)状态CSS */<br /> .QQPanel a.qq2 { background-position: -35px 0;}<br /> .QQPanel a.qq3 { background-position: -69px 0;}<br /> .QQPanel a.qq4 { background-position: -103px 0;}<br /> /* QQ在线状态CSS */<br /> .QQPanel .online a.qq1 { background-position: 0 -34px; }<br /> .QQPanel .online a.qq2 { background-position: -35px -34px; }<br /> .QQPanel .online a.qq3 { background-position: -69px -34px; }<br /> .QQPanel .online a.qq4 { background-position: -103px -35px; }<br /> /* QQ在线状态鼠标移入时CSS */<br /> .QQPanel .online a.qq1:hover { background-position: 0 bottom; }<br /> .QQPanel .online a.qq2:hover { background-position: -35px bottom; }<br /> .QQPanel .online a.qq3:hover { background-position: -69px bottom; }<br /> .QQPanel .online a.qq4:hover { background-position: -103px bottom; }<br /> #sorollDiv1{padding-top:50px;width:130px;height:341px;background:url(/uploads/allimg/1105/logopng1.gif) no-repeat center top;margin:0 auto;}<br /> }<br /> </style><br /> </head><br /> <body><br /> <div id="sorollDiv1" style="top:150px;right:0px;position:absolute;"><br /> <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><br /> </ul><br /> </div><br /> <script type="text/javascript"><br /> var lastScrollY=0;<br /> function heartBeat(){<br /> diffY=document.documentElement.scrollTop;<br /> percent=0.1*(diffY-lastScrollY);<br /> if(percent>0)percent=Math.ceil(percent);<br /> else percent=Math.floor(percent);<br /> document.getElementById("sorollDiv1").style.top=parseInt(document.getElementById("sorollDiv1").style.top)+percent+"px";<br /> lastScrollY=lastScrollY+percent;<br /> }<br /> window.setInterval("heartBeat()",1);<br /> </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 /> <script type="text/javascript"><br /> //<![CDATA[<br /> var online = [];<br /> function QQPanel(id, data){<br /> if((this.id = this.get(id)) == null)return false;<br /> this.url = 'http://webpresence.qq.com/getonline?Type=1&';<br /> this.header = document.getElementsByTagName('head');<br /> this.items = this.id.childNodes;<br /> this.lens = this.items.length;<br /> this.index = 0;<br /> this.data = data;<br /> this.start();<br /> }<br /> QQPanel.prototype = {<br /> get: function(id){return document.getElementById(id);},<br /> start: function(){<br /> if(this.index >= this.lens)return this.running=false;<br /> this.running = true;<br /> var script = document.createElement('script');<br /> script.type = 'text/javascript';<br /> script.src = this.url + this.data[this.index] +':&'+(+new Date());<br /> this.header[0].appendChild(script);<br /> script.onload = script.onreadystatechange = (function(script){<br /> var _this = this;<br /> return (function(){<br /> if(script.readyState){<br /> if(script.readyState.match(/loaded|complete/i)){<br /> _this.show(script)<br /> _this = script = null;<br /> }<br /> }else{<br /> _this.show()<br /> _this = script = null;<br /> }<br /> });<br /> }).call(this, script);<br /> },<br /> show: function(s){<br /> this.items[this.index].className = '';<br /> this.items[this.index].title = '我不在线,有事请留言.';<br /> if(online[0] == 1){<br /> this.items[this.index].className = 'online';<br /> this.items[this.index].title = '我在线,有事您招呼.';<br /> }<br /> this.items[this.index].firstChild.href = 'tencent://message/?uin='+this.data[this.index++]+'&Site=匆匆过客&Menu=yes';<br /> this.start();<br /> },<br /> reload: function(){<br /> if(this.running)return false;<br /> this.index = 0;<br /> this.start();<br /> }<br /> }<br /> var QQOnline = new QQPanel('QQPanel', [32619959, 939170315, 706281436, 503703]);<br /> setInterval(function(){//每隔10秒检测一次在线状态<br /> QQOnline.reload();<br /> }, 10000);<br /> //]]><br /> </script><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示：可修改后代码再运行! 文章导航 jQuery浅灰色导航菜单代码，来自Meizu魅族网站JS滑动展开导航，一个常用的网站管理菜单
