汉字拼音转换http://www.welefen.com/lab/pinyin/

pinyin.js

if(typeof Welefen != "object")Welefen = {Class:{div:null}};
Welefen.Class.pinyinSelect = function(id,selectArray)
{
	var pinyinId = document.getElementById(id);
	var pinyinArray = selectArray;
	var isSelected = 0;
	pinyinId.onclick = function()
	{
		isSelected = 0;
		var e = this;
		var x = e.offsetLeft;
		var y = e.offsetTop;
		while(e = e.offsetParent){
			x+= e.offsetLeft;
			y+= e.offsetTop;
		}
		if(Welefen.Class.div === null){
			var oDiv = document.createElement("div");
			Welefen.Class.div = oDiv;
		}else{
			var oDiv = Welefen.Class.div;
		}
		oDiv.innerHTML = "";
		oDiv.style.position = "absolute";
		oDiv.style.zIndex = 1000;
		oDiv.style.top = y+19+"px";
		oDiv.style.display = "block";
		oDiv.style.left = x+"px";
		oDiv.style.backgroundColor = "#fff";
		oDiv.style.cursor = "default";
		var pinyinMaxWidth = 0;
		for(var i=0;i<pinyinArray.length;i++){
			var o = document.createElement("div");
			o.style.height = "20px";
			o.style.paddingLeft = "4px";
			o.style.lineHeight = "20px";
			o.innerHTML = pinyinArray[i];
			oDiv.appendChild(o);
			if(pinyinArray[i].length > pinyinMaxWidth){
				pinyinMaxWidth = pinyinArray[i].length;
			}
			o.onclick = function()
			{
				isSelected = 1;
				pinyinId.innerHTML = this.innerHTML;
				pinyinId.className = "";
				oDiv.style.display = "none";
			}
			o.onmouseover = function()
			{
				this.style.backgroundColor = "#7F9DB9";
				this.style.color = "#fff";
			}
			o.onmouseout = function()
			{
				this.style.backgroundColor = "white";
				this.style.color = "#000";
			}
		}
		pinyinMaxWidth = pinyinMaxWidth*7;
		var defaultWidth = pinyinArray[0].length*7+16;
		oDiv.style.width = defaultWidth > pinyinMaxWidth ? defaultWidth+"px" : pinyinMaxWidth+"px";
		oDiv.style.border = "1px solid #7F9DB9";
		document.body.appendChild(oDiv);
	}
	pinyinId.onmouseover = function()
	{
		if(isSelected){
			this.className = "pinyinbg";
		}
	}
	pinyinId.onmouseout = function()
	{
		if(isSelected){
			this.className = "";
		}
	}
}