Js+CSS打造兼容firefox的offsetX

2024-09-05 12:17:58

字体：大中小

来源：转载

供稿：网友

兼容firefox的offsetX,计算鼠标位置（触发元素与窗口的距离,计算从触发到root间所有元素的offsetLeft值之和

<html><head><title>兼容firefox的offsetX</title><style type="text/css"> .box{width:300px;height:150px;border:1px solid #ccc;margin:50px;padding:50px;border:3px solid #ccc;}.ruler{position:relative;}</style></head><body><div class='box'>	<img class='ruler' src='http://www.codefans.net/jscss/demoimg/201008/ruler10.gif' onmousemove='sizer(event)' />	<div id='ct'></div></div><script type='text/javascript'> var $id=function(id){	return document.getElementById(id) || id;}function sizer(e){	var e=window.event || e,		posX=(e.offsetX==undefined) ? getOffset(e).offsetX : e.offsetX ;		$id('ct').innerHTML='offsetX(包括FF):'+posX+'<br />clientX:' +e.clientX+'<br />layerX:' +e.layerX+'<br />pageX:'+ e.pageX;}function getOffset(e){  var target = e.target;  if (target.offsetLeft == undefined)  {    target = target.parentNode;  }  var pageCoord = getPageCoord(target);  var eventCoord =  {     x: window.pageXOffset + e.clientX,    y: window.pageYOffset + e.clientY  };  var offset =  {    offsetX: eventCoord.x - pageCoord.x,    offsetY: eventCoord.y - pageCoord.y  };  return offset;}function getPageCoord(element)    {  var coord = {x: 0, y: 0};  while (element)  {    coord.x += element.offsetLeft;    coord.y += element.offsetTop;    element = element.offsetParent;  }  return coord;}</script></body></html>

上一篇：弹出窗口代码产生器HTML代码

下一篇：可关闭固定底（顶）部的工具条菜单