调用的方法很简单:
<input type="button" onclick="Show(this)" id="Button2" value="clickMe" /><br />
<script type="text/javascript">
function Show(checkEl)
{
document.getElementById("tishiDiv").style.display = "block";
document.getElementById("tishiDiv").style.position = "absolute";
document.getElementById("tishiDiv").style.top = getXY(checkEl)[1]+12+"px";
document.getElementById("tishiDiv").style.left = getXY(checkEl)[0]-10+"px";
}
/**
* 获取对象el的X,Y坐标
* @param {Object} el
*/
function getXY(el){
var pos;
if(this.getExplorerType()==1){
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
pos = [el.getBoundingClientRect().left+scrollLeft, el.getBoundingClientRect().top+scrollTop];
}else{
pos = [el.offsetLeft, el.offsetTop];
var parentNode = el.offsetParent;
if (parentNode != el) {
while (parentNode) {
pos[0] += parentNode.offsetLeft;
pos[1] += parentNode.offsetTop;
parentNode = parentNode.offsetParent;
}
}
if (el.parentNode) { parentNode = el.parentNode; }
else { parentNode = null; }
while (parentNode && parentNode.tagName.toUpperCase() != 'BODY' && parentNode.tagName.toUpperCase() != 'HTML'){
if (parentNode.style.display != 'inline') {
pos[0] -= parentNode.scrollLeft;
pos[1] -= parentNode.scrollTop;
}
if (parentNode.parentNode) {
parentNode = parentNode.parentNode;
} else { parentNode = null; }
}
}
return pos;
}
function getExplorerType(){
var ua = navigator.userAgent.toLowerCase();
if(window.ActiveXObject){
return 1;
}else if((ua.indexOf('firefox')>-1)){
return 2;
}else if((ua.indexOf('opera')>-1)){
return 3;
}
}
</script>
function Show(checkEl)
{
document.getElementById("tishiDiv").style.display = "block";
document.getElementById("tishiDiv").style.position = "absolute";
document.getElementById("tishiDiv").style.top = getXY(checkEl)[1]+12+"px";
document.getElementById("tishiDiv").style.left = getXY(checkEl)[0]-10+"px";
}
/**
* 获取对象el的X,Y坐标
* @param {Object} el
*/
function getXY(el){
var pos;
if(this.getExplorerType()==1){
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
pos = [el.getBoundingClientRect().left+scrollLeft, el.getBoundingClientRect().top+scrollTop];
}else{
pos = [el.offsetLeft, el.offsetTop];
var parentNode = el.offsetParent;
if (parentNode != el) {
while (parentNode) {
pos[0] += parentNode.offsetLeft;
pos[1] += parentNode.offsetTop;
parentNode = parentNode.offsetParent;
}
}
if (el.parentNode) { parentNode = el.parentNode; }
else { parentNode = null; }
while (parentNode && parentNode.tagName.toUpperCase() != 'BODY' && parentNode.tagName.toUpperCase() != 'HTML'){
if (parentNode.style.display != 'inline') {
pos[0] -= parentNode.scrollLeft;
pos[1] -= parentNode.scrollTop;
}
if (parentNode.parentNode) {
parentNode = parentNode.parentNode;
} else { parentNode = null; }
}
}
return pos;
}
function getExplorerType(){
var ua = navigator.userAgent.toLowerCase();
if(window.ActiveXObject){
return 1;
}else if((ua.indexOf('firefox')>-1)){
return 2;
}else if((ua.indexOf('opera')>-1)){
return 3;
}
}
</script>