کد نشان دهنده مکان ماوس در صفحه با استفاده از دو خط افقی و عمودی

این کد زیبا با استفاده از جی کوئری ساخته شده است و به شما امکان می دهد که در صفحه خود دو خط عمودی و افقی بکشید و با بردن ماوس روی صفحه مکان این خط ها تغییر کرده و مکان اصلی آن را به صورت دقیق به شما نشان می دهد.

برای دیدن دمو اینجا کلیک کنید.

این کد را در head صفحه خود قرار دهید (اگر صفحه شما دارای فایل jQuery می باشد خط اول را حذف کنید.):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script> $(document).ready(function(){ // by www.moisrex.rozblog.com $(document).mousemove(function(e){ $('.pageX').css({'left':e.pageX}); $('.pageY').css({'top':e.pageY}); $('.XY').css({'top':e.pageY-20,'left':e.pageX+5}); $('.pageXX').html(e.pageX); $('.pageYY').html(e.pageY); }); }); </script> <style> /* www.moisrex.r98.ir */ .pageX{ height:100%; position:absolute; top:0; width:0; margin:0; padding:0; } .pageY{ width:100%; height:0; left:0; position:absolute; margin:0; padding:0; } .XY{ position:absolute; font:11px tahoma; } </style>

این کد را درون body صفحه خود قرار دهید:

<div style="position:absolute;top:-200%;"><a href="http://moisrex.rozblog.com/">کد نشان دهنده مکان ماوس در صفحه</a></div><div class="XY">x:<span class="pageXX"></span>px Y:<span class="pageYY"></span>px</div><hr class="pageX"><hr class="pageY">