根据xml文件动态显示提示层效果

Js页面：
var g_browserVer;
var g_tips_timer = null;
var g_tips_j = 3;
<!-- Hide
 function killErrors() {
  return true;
 }
 window.onerror = killErrors;
 // -->
function getPos(obj)
{
 var pos = [];
 pos[0] = obj.offsetLeft;//X
 //pos[1] = obj.offsetTop;//Y
 pos[1] = obj.offsetHeight;//Y
 while (obj = obj.offsetParent)
 {
  pos[0] += (obj.offsetLeft||0);
  pos[1] += (obj.offsetTop||0);
 }
 return pos;
}

function newShowTips(obj,way,imgHeight,strA,strB,x)
{
 var featureTips = $id("featureTips");
 var featureTips2 = $id("featureTips2");
 var pos = getPos(obj);
 $id("featureTipsImg").innerHTML = readXML(strA.toUpperCase(),strB.toUpperCase(),15);
 if(x){
 featureTips.style.left=(pos[0]+x)+"px";
 featureTips2.style.left=(pos[0]+x)+"px";
 }
 else{
 featureTips.style.left = pos[0] + "px";
 featureTips2.style.left = pos[0] + "px";
 }
 if (way == "down")
 {
  g_tips_timer = setInterval(function(){tipsAnimateDown()},10);
 }
 else
 {
  g_tips_timer = setInterval(function(){tipsAnimateUp(imgHeight)},10);
 }
 function tipsAnimateDown()
 {
  if (g_tips_j == 3)
  {
   featureTips.style.display = "block";
   featureTips2.style.display = "block";
   $id("featureTips2").height=$id("featureTips").offsetHeight-1;
   $id("featureTips2").width=$id("featureTips").offsetWidth-1;
   //alert("bottom=="+$id("featureTips2").height);
  }
  if (g_tips_j >= 0)
  {
   //featureTips.style.top = (pos[1] + 20 + g_tips_j * 15) + "px";
   //featureTips2.style.top = (pos[1] + 20 + g_tips_j * 15) + "px";
      //featureTips.style.top = (pos[1] + g_tips_j * 15+$id("featureTips").offsetHeight-30) + "px";
   //featureTips2.style.top = (pos[1] + g_tips_j * 15+$id("featureTips").offsetHeight-30) + "px";
   
   featureTips.style.top = (pos[1]+g_tips_j * 15+40) + "px";
   featureTips2.style.top = (pos[1]+g_tips_j * 15+40) + "px";
   //alert("top=="+featureTips2.style.top);
   //alert("bottom=="+featureTips2.style.bottom);
   setOpacity();
   g_tips_j--;
  }
  else
  {
   clearInterval(g_tips_timer);
   g_tips_timer = null;
   g_tips_j = 3;
  }
 }
 function tipsAnimateUp(imgHeight)
 {
  if (g_tips_j == 3)
  {
   featureTips.style.display = "block";
   featureTips2.style.display = "block";
  }
  if (g_tips_j >= 0)
  {
   featureTips.style.top = (pos[1] - imgHeight - 10 - g_tips_j * 15) + "px";
   featureTips2.style.top = (pos[1] - imgHeight - 10 - g_tips_j * 15) + "px";
   setOpacity();
   g_tips_j--;
  }
  else
  {
   clearInterval(g_tips_timer);
   g_tips_timer = null;
   g_tips_j = 3;
  }
 }
 function setOpacity()
 {
  if (g_browserVer == 1)
  {
   featureTips.filters.alpha.opacity = 100 - g_tips_j * 25;
   featureTips2.filters.alpha.opacity = 100 - g_tips_j * 25;
  }
  else
  {
   featureTips.style.opacity = 1 - g_tips_j * 0.25;
   featureTips2.style.opacity = 1 - g_tips_j * 0.25;
  }
 }
 
}

function newHideTips()
{
 $id("featureTips").style.display = "none";
 $id("featureTips2").style.display = "none";

 clearInterval(g_tips_timer);
 g_tips_timer = null;
 g_tips_j = 3;
 $id("featureTipsImg").src = "";
}

function $id(id)
{
 if (typeof(id) == "string")
 {
  return document.getElementById(id); 
 }
}

if(navigator.userAgent.indexOf("MSIE")>=0)
{
 g_browserVer = 1;//ie
}
else
{
 g_browserVer = 2;//ff
}

function readXML(page_id,tip_id,num){
 //alert(page_id);
 //alert(tip_id);
 try{ //Internet Explorer
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
   }catch(e){
    try{ //Firefox, Mozilla, Opera, etc.
      xmlDoc=document.implementation.createDocument("","",null);
     }catch(e){
      alert(e.message);
      return;
     }
   }
 xmlDoc.async=false;
 xmlDoc.load("/include/tipes.xml");
 //alert(xmlDoc.getElementsByTagName("page")[0].childNodes[0].getAttribute("id"));
 var pages=xmlDoc.getElementsByTagName("page");
 //alert(pages.length);
 for(var i=0;i<pages.length;i++){
  if(pages[i].getAttribute("id").toUpperCase()==page_id){
   //alert(pages[i].childNodes.length);
   for(var j=0;j<pages[i].childNodes.length;j++){
    //alert(pages[i].childNodes[j].getAttribute("id"));
    if(pages[i].childNodes[j].getAttribute("id").toUpperCase()==tip_id){
     //alert(pages[i].childNodes[j].childNodes[0].nodeValue);
     //var cLayer = document.getElementById('ctrlLayer');
     if(pages[i].childNodes[j].getAttribute("type").toUpperCase()=="IMG")
     {
      html="<div style='padding:0 2px;'><div style='border:0px #bce7fd solid; padding:1px;position:relative; top:-2px;'><img src='"+pages[i].childNodes[j].childNodes[0].nodeValue +"' /></div></div>";
      //html+='<iframe id="ctrlLayer2" style="display:none;left:0; z-index:-1; border-Style:none;width:200px;padding-top:5px; height:100px;text-indent:1em;" ></iframe>';
      //cLayer.style.background="";
         //cLayer.style.border="";
      return html;
     }
      //cLayer.style.background="FFFFE1";
      //cLayer.style.border="solid 1px #000";
      html=pages[i].childNodes[j].childNodes[0].nodeValue;
      var new_html="";
      for(var i=0;i<html.length/num;i++){
       new_html+=html.substring(num*i,num*(i+1))+"<br>";
      }
     
      return  new_html;//pages[i].childNodes[j].childNodes[0].nodeValue;
    }
   }
  }
 }
}
document.write('<DIV id=featureTips style="z-index:200;DISPLAY: none; FILTER: alpha(opacity=0); PADDING-TOP: 2px; POSITION: absolute; opacity: 0"><DIV style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px; BACKGROUND: #e7eff2; PADDING-BOTTOM: 0px; PADDING-TOP: 0px" ><DIV style="BORDER-RIGHT: #bce7fd 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #bce7fd 1px solid; PADDING-LEFT: 1px; BACKGROUND: white; PADDING-BOTTOM: 1px; BORDER-LEFT: #bce7fd 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #bce7fd 1px solid; POSITION: relative; TOP: -2px"><div id=featureTipsImg style="letter-spacing:2px;line-height: 250%;font-size: 8px"></div></DIV></DIV></DIV>');
document.write('<iframe id="featureTips2" style="z-index:2;DISPLAY: none; FILTER: alpha(opacity=0); PADDING-TOP: 2px; POSITION: absolute; opacity: 0"></iframe>');

 

 

XML文件：

<?xml version="1.0" encoding="gb2312"?>
<note>
<page id="XZQLSXLR">
 <tip id="LEGALPERSON" type="text">法人代表</tip>
 <tip id="ORGANIZATIONCODE" type="text">结构组织代码</tip>
 <tip id="t1" type="img">/images/sltphelp/zfztzgz.jpg</tip>
 <tip id="WORKADDRESS" type="img">/images/sltphelp/zfztzgz.jpg</tip>
 <tip id="LAWPROVINCE" type="img">/images/sltphelp/zfztzgz.jpg</tip>
 <tip id="LAWGIST" type="img">/images/sltphelp/zfztzgz.jpg</tip>
</page>

</note>