网页上的标尺

Question

我想要一个类似于顶部和左侧标尺的东西，就像我们在标尺上描绘鼠标位置的单词一样，我们是否有任何内置在jquery上/有没有办法实现这个？

任何UI专业版都请回复相同的

Answer 1

忽略标尺元素的创建，假设每个标尺内部都有一个小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函数。

Answer 2

这是我写的插件，它不需要Jquery或其他任何东西。 https://github.com/MrFrankel/ruler

Answer 3

您可以尝试jquery-ui.ruler。它是一个jquery-ui插件，可以创建一个顶部和左侧标尺。

功能

• 单位（px，mm，cm，in）
• sub-div的规则
• 刻度线间距/可见性可自定义
• 鼠标跟踪

示例：

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

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