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

发布时间：2018-09-04 00:35:03 所属栏目：访谈来源：站长网

导读：兼容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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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