自定義QQ在線狀態圖片

2024-09-05 12:22:40

字體：大中小

來源：轉載

供稿：網友

QQ在線客服狀態檢測,自定義在線狀態圖片，可設置不同的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=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('/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></li><li></li><li></li><li></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>

上一篇：百度視窗，Js右下角視頻廣告代碼

下一篇：可關閉或最小化的右下角浮動廣告