自定义QQ在线状态图片

时间：2014-06-08 09:07 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!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=UTF-8" />
  <title>QQ在线客服状态检测,自定义在线状态图片</title>
	<style type="text/css" media="screen">
		.QQPanel { list-style: none; }
		.QQPanel li { float: left; margin-right: 10px; }
		.QQPanel a { display: block; height: 34px; width: 34px; background: url('http://www.codefans.net/jscss/demoimg/201007/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; }
	</style>
 </head>
 <body>
	<ul class="QQPanel" id="QQPanel"><li><a href="#" class="qq1"></a></li><li><a href="#" class="qq2"></a></li><li><a href="#" class="qq3"></a></li><li><a href="#" class="qq4"></a></li></ul>
	<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', [48080163, 276891949, 14944941, 1007051105]);
		setInterval(function(){//每隔10秒检测一次在线状态
			QQOnline.reload();
		}, 10000);
	//]]>
	</script>
 </body>
</html>

自定义QQ在线状态图片

网页特效