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   id="iwvjtn8m0"   class='box'>	<img class='ruler' src='http://www.codefans.net/jscss/demoimg/201008/ruler10.gif' onmousemove='sizer(event)' />	<div   class="iwvjtn8m0"   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代碼

下一篇：可關閉固定底（頂）部的工具條菜單