0

我正在试验CSS3D 变换，我正在尝试制作滑块来处理变换。我想出了Three.js 的编辑器，我喜欢它如何处理每个对象的位置、旋转和缩放的想法。它同时是一个输入和一个滑块，或者我只是假设。

即使在检查了源代码之后，我也没有弄清楚它是如何工作的，我想给我一个实现相同功能的代码片段。具体来说，要有一个输入值，只需向右/向左滑动该值，对象就会移动或手动给出一个值。

注意：我对转换的功能不感兴趣，只对如何完成这样的输入滑块感兴趣。

先感谢您。

4

2 回答 2

1

这是一个（非常）简单的 jQuery 插件，它模拟你所追求的（对于整数）。我将把它扩展为处理浮点数作为你的练习。

JSFiddle 在http://jsfiddle.net/yRmHS/3/添加了用于光标的 CSS

jQuery.fn.slidingInput = function (opts) {

    var defaults = {
        step: 1,        // Increment value
        min: 0,         // Minimum value
        max: 100,       // Maximum value
        tolerance: 2    // Mouse movement allowed within a simple click
    };

    return this.each(function () {
        var $el = $(this),
            options = $.extend({}, defaults, opts, this),
            distance = 0,
            initialValue = 0;

        function mouseDown () {
            distance = 0;
            initialValue = parseInt($el.val(), 10);

            $(document).on('mousemove', mouseMove).on('mouseup', mouseUp);

            return false;
        }

        function mouseMove (e) {
            var currentValue = parseInt($el.val(), 10),
                event = e.originalEvent,
                movementX = event.movementX || event.webkitMovementX || event.mozMovementX || 0,
                movementY = event.movementY || event.webkitMovementY || event.mozMovementY || 0;

            distance += (movementX - movementY) * options.step;

            $el.val(Math.min(options.max, Math.max(initialValue + distance, options.min)));
        }

        function mouseUp () {
            $(document).off('mousemove mouseup');

            if (Math.abs(distance) < options.tolerance) {
                $el.focus();
            }
        }

        $el.on('mousedown', mouseDown);
    });
};

// How to use it
$(function () {
    // Initialise plugin
    // HTML sample: <input type="number" class="slidable" step="2" value="50" min="0" max="100" />
    $('.slidable').slidingInput();

    // Accepts options object that override defaults, but step/min/max on input override options
    /*
        $('.slidable').slidingInput({
            step: 1,
            min: 0,
            max: 100,
            tolerance: 2
        });
    */
});
于 2013-05-23T02:14:32.067 回答
1

inputs 在 a中，div样式看起来像标签：没有边框，没有背景。s上有一个样式，input可以将光标更改为滑块光标 ( cursor:col-resize)。

s 上可能有一个onmousedown/onmouseup侦听器input，然后onmousemove在鼠标按下时获取鼠标位置。我发现将一个全局onmousemove处理程序放在body最有效。如果您将onmousemove事件放在一个小元素上，当鼠标不再位于该元素上时，您将不会收到事件。正如您在 three.js 编辑器中看到的那样，您可以 mousedown 然后将鼠标移动到页面上的任意位置。

您可能需要使用event.preventDefault()以确保onmousedown不会触发对输入元素的关注。

于 2013-05-23T00:19:06.207 回答