鼠标右下角显示层，javascript读取xml

最新推荐文章于 2026-06-23 11:39:51 发布

原创最新推荐文章于 2026-06-23 11:39:51 发布 · 1.9k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一种使用JavaScript实现鼠标悬停时显示XML数据的方法。通过解析XML字符串并将其内容展示在一个浮动窗口中，该技术可用于创建交互式用户界面元素。文章详细解释了涉及的函数及其工作原理。

//鼠标经过时候显示div

function showdiv(content,field) {

var x = window.event.x;

var y = window.event.y;

var show = document.getElementById("ShowInfo");

show.style.visibility = "visible";

show.style.top = y;

show.style.left = x;

show.style.background="#ffff00";

//show.innerHTML = "1234567";

//鼠标移动时候div跟随

XmlRead(content,field);

document.onmousemove = moveToMouseLoc;

}

//鼠标移开的时候隐藏div

function Remove()

{

var show=document.getElementById("ShowInfo");

if(show != "" || show != null)

{

show.style.visibility = "hidden";

}

//鼠标移动时候div跟随

function moveToMouseLoc(e)

{

x = window.event.x;

y = window.event.y;

var show = document.getElementById("ShowInfo");

show.style.left = x;

show.style.top = y;

return true;

}

//读取xml

function XmlRead(content,field)

{

var doc = new ActiveXObject("Microsoft.XMLDOM");

//得到隐藏控件中的xml值

var sXml = document.getElementById("LbHidden").innerHTML;

try

{

doc.loadXML(sXml);

}

catch(e)

{

alert(e.message);

return ;

}

//画一个table吧值存到table中

var table = "<table cellspacing="0" rules="all" bordercolorlight="#b4b1b1" bordercolordark="#ffffff" border="1"><tr class='title'><td>数据来源</td><td>" + content + "</td></tr>";

var xmlnode = doc.documentElement;

for(i=0;i<xmlnode.childNodes.length;i++)

{

//加载xml值到table中

table += "<tr><td>" + xmlnode.childNodes.item(i).getAttribute('Desc');

table += "</td><td>" + xmlnode.childNodes.item(i).selectSingleNode("DATA/" + field.toUpperCase()).text + "</td></tr>";

//alert(xmlnode.childNodes.item(i).getAttribute('成考'));

}

table += "</table>";

//把table放到div中的span中

document.getElementById('sp').innerHTML=table;

//nod=doc.selectSingleNode("Datas/Source[@Desc='成考']/Data/WaterOutCount/");

//nod=doc.selectSingleNode("Datas/Source")

//nod.text;

}

</script>

标签

#javascript #table #function #div #xml