|
|
|
<html><head><title>pageX\pageY & layerX\layerY example</title><script type="text/javascript">function showCoords(evt){ var form = document.forms.form_coords; var parent_id = evt.target.parentNode.id; form.parentId.value = parent_id; form.pageXCoords.value = evt.pageX; form.pageYCoords.value = evt.pageY; form.layerXCoords.value = evt.layerX; form.layerYCoords.value = evt.layerY;}</script><style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; }</style></head><body onmousedown="showCoords(event)"><p>To display the mouse coordinates please click anywhere on the page.</p><div id="d1"><span>This is an un-positioned div so clicking it will returnlayerX/layerY values almost the same as pageX/PageY values.</span></div><div id="d2"><span>This is a positioned div so clicking it will return layerX/layerYvalues that are relative to the top-left corner of this positionedelement. Note the pageX\pageY properties still return theabsolute position in the document, including page scrolling.</span><span>Make the page scroll more! This is a positioned div so clicking itwill return layerX/layerY values that are relative to the top-leftcorner of this positioned element. Note the pageX\pageY properties stillreturn the absolute position in the document, including pagescrolling.</span></div><div id="d3"><form name="form_coords"> Parent Element id: <input type="text" name="parentId" size="7" /><br /> pageX:<input type="text" name="pageXCoords" size="7" /> pageY:<input type="text" name="pageYCoords" size="7" /><br /> layerX:<input type="text" name="layerXCoords" size="7" /> layerY:<input type="text" name="layerYCoords" size="7" /></form></div></body></html> |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡