关于在firefox和IE上设置div层位置坐标的方法

来源:互联网 发布:数据挖掘关联规则算法 编辑:程序博客网 时间:2024/06/06 13:00

问题描述:在一个table里面,当鼠标放上其中内容的时候,显示其中一列所有<td></td>标签里面的值,其实效果跟title差不多,但是显示的信息是要通过java函数获取的一个对象的属性,title不是很方便(用title的话也可以显示信息,但是只是一行,当文本太长的时候很不美观)。决定在<td>里面加一个onmouseover解决,这样的话还可以设置下显示信息文本框的其他属性。当然如果有朋友觉得title也能解决问题的话,欢迎给出代码哦。

解决步骤:

//1.在IE,FireFox中都获取鼠标事件,代码是借鉴的

function mouseMove(ev){

  ev = ev || window.event; 

  mousePos = mousePosition(ev);  

}

//2.获取鼠标位置  

function mousePosition(ev){   

  if(ev.pageX || ev.pageY){   

      return {x:ev.pageX, y:ev.pageY};   

  }   

  return {   

      x:ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,   

      y:ev.clientY + document.documentElement.scrollTop  - document.body.clientTop   

  };   

//3.写在<script></script>末尾或者某个位置,这句的作用是当鼠标移动的时候可以获取鼠标所在的x,y点坐标

document.onmousemove = mouseMove;


//4.然后在<td>标签里面设置onmouseover方法;

<td align="center" style="overflow:hidden;text-overflow:ellipsis;" onmouseover="show(<%=参数为java函数获得%>)" onmouseout="hide()">此列的内容</td>

//定义一个div,好通过innerHTML显示信息和设置一些属性

<div id="showDiv" style="position: absolute; background-color: white; border: 1px solid black; display:none; overflow:hidden; width:100px;"></div>


//5.定义show()方法,通过此方法设置上面divx,y坐标--mousePos.x,mousePos.y

function show(info){

  var showDiv = document.getElementById("showDiv");

  showDiv.style.left = mousePos.x+'px';

  showDiv.style.top = mousePos.y+'px';

  showDiv.style.display = 'block';

  showDiv.innerHTML = info;

  toBreakWord(15,showDiv);

}

function toBreakWord(intLen,obj){
  var strContent = obj.innerHTML;   
  var strTemp = "";
  while(strContent.length>intLen){
    strTemp += strContent.substr(0,intLen) + " ";   
    strContent = strContent.substr(intLen,strContent.length);   
  }
  strTemp += " " + strContent;
  obj.innerHTML = strTemp;
}

最初设置坐标没有加'px',没有成功,由于ie中showDiv.style.pixelLeft=mousePos.x;这样是可行的,但是换到ff上面又不支持pixelLeft,只能用上面那种方式了。toBreakWord()这个方法是在传过来的remark值过长的时候,把它分解成多行以便innerHTML形成多行的显示。

到这里是解决我的问题,希望对大家有一点点帮助




原创粉丝点击