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

发布时间：2018-09-11 20:28:29 所属栏目：专访来源：站长网

导读：兼容firefox的offsetX,计算鼠标位置（触发元素与窗口的距离,计算从触发到root间所有元素的offsetLeft值之和。此类特效，我们用的不多，不过可以学习一下js与css的完美结合，在以后的网页制作过程中有很大帮助。效果如下： htmlheadtitle兼容firefox的off

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

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!