兼容火狐浏览器的offsetX效果 js+css实现

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

　　此类特效，我们用的不多，不过可以学习一下js与css的完美结合，在以后的网页制作过程中有很大帮助。

　　效果如下：

<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.aspzz.cn/uploads/allimg/180818/1I3016149_0.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 +' clientX:' +e.clientX +' layerX:' +e.layerX +' 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> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

兼容火狐浏览器的offsetX效果 js+css实现

由 dawei

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性

兼容火狐浏览器的offsetX效果 js+css实现

由 dawei

相关文章

COLMO以理享之光，照亮理享世界

美巢坊水固，兼顾质量与环保，硬核家装实力派

宗艺石材携手群核科技（酷家乐），开创设计家装一体化营销模式

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性