网页上的标尺

问题描述

| 我想要像顶部和左侧标尺之类的东西，就像我们在字面上描述鼠标在标尺上的位置一样，jquery上是否有任何内置功能/是否有任何方法可以实现？ 任何UI专业人士请同样回答     

解决方法

        忽略标尺元素的创建，假设您在每个标尺内都有一个小div，用于显示鼠标在相关轴上的位置，其ID分别为

mouse-x-pos

和

mouse-y-pos

，您可以执行以下操作：

$(document).ready(function() {
    $(\'body\').mousemove(function(event) {
        $(\'#mouse-x-pos\').css(\'left\',event.pageX + \'px\');
        $(\'#mouse-y-pos\').css(\'top\',event.pageY + \'px\');
    });
});

我将留给CSS，主要是在jQuery中使用mousemove函数。     ,        我在这里写的Heres插件不需要Jquery或其他任何东西。 https://github.com/MrFrankel/ruler     ,        您可以尝试jquery-ui.ruler。这是一个jquery-ui插件，可创建顶部和左侧标尺。 特征： 单位（像素，毫米，厘米，英寸） 细分中的规则 刻度间距/可见性可定制 鼠标轨迹 例：

// simple initialization
$(\'.selector\').ruler();

// or use different unit and tick values
$(\'.selector\').ruler({
    unit: \'mm\',tickMajor: 10,tickMinor: 5,tickMicro: 1,showLabel: true
});