jQuery Volume Slider

Question

jQuery Volume Slider

0

похоже, я не могу найти решение для этого. Пожалуйста, помогите мне.

Я хочу сделать простой слайдер.

SO, так как вы можете видеть, что оранжевая часть - это мой ползунок громкости.

Это мой jQuery:

var mouseDown = false;

$("#volSlider").mousedown(function() { mouseDown = true; });
$("#volSlider").mouseup(function() { mouseDown = false; });
$("#volSlider").mouseleave(function() { mouseDown = false; });

$("#controlVolume").mousemove(function(e) 
{
    if (mouseDown == true) 
    {
        var caretFromTop = $("#volCaret").position().top;
        var areaHeight = $("#volSlider").height();
        var volume = (caretFromTop / areaHeight) * 100;
        volume = Math.round(volume);

        $("#volCaret").css("bottom", volume);
        $("#volText").text(volume);

        if (volume <= 100 && volume >= 0)
        {
            //To be added.
        }
    }
});

EDIT: для тех, кто хочет видеть мой HTML:

    <div id="controlVolume">
    <div id="volSlider">
        <div id="volCaret"></div>
    </div>
    <div id="volText"></div>
</div>

Когда я пытаюсь перетащить курсор вверх, он просто переходит в "1", а не дальше. Что-нибудь мне не хватает? Заранее спасибо.

Frederik Moller 19 март 2014, в 18:42

Источник

0

% означает по модулю. Я думаю, вы хотите умножить?
eithed 19 март 2014, в 16:50
0

Большие до MS Paint!
WheretheresaWill 19 март 2014, в 16:50
0

Извините, да, это была опечатка. на самом деле это "*", а не "%"
Fred 19 март 2014, в 16:51

Показать ещё 1 комментарий

Теги:

javascript

jquery

html5

css3

1 ответ

Ещё вопросы

% означает по модулю. Я думаю, вы хотите умножить?
Извините, да, это была опечатка. на самом деле это "*", а не "%"

eithed · Accepted Answer · 2014-03-19T14-26-00.000Z

То, что вы на самом деле хотите сделать, это отслеживать Y вершину мыши, а не высоту каретки (ну, технически да - высота каретки, которая изменяется между движениями мыши). В настоящее время вы отслеживаете положение строки тома, которая не изменяется.

Таким образом, ваш код должен выглядеть примерно так:

var mousePos = 0;
var mouseDown = false;
var height = 0;

$("#volSlider").mousedown(function(e) { mouseDown = true; mousePos = e.pageY; height = $("#volCaret").height(); });
$("#volSlider").mouseup(function() { mouseDown = false; mousePos = 0 });
$("#volSlider").mouseleave(function() { mouseDown = false; mousePos = 0 });

$("#controlVolume").mousemove(function(e) 
{
    if (mouseDown == true) 
    {
        var areaHeight = $("#volSlider").height();
        var caretHeight = height + (e.pageY - mousePos);
        $("#volCaret").height(caretHeight ); 

        var volume = caretHeight / areaHeight * 100;
        console.log(volume);

    }
});

Было бы здорово, если бы вы поместили свой код на jsfiddle, так как, вероятно, там что-то я не думал, и этот код терпит неудачу.

Чтобы поставить рабочий пример на jsFiddle, мне потребуется переделать большую часть материала, чтобы он работал, так как это своего рода большой проект. Я попробовал ваш код, и он, кажется, работает в некотором смысле, но высота каретки меняется. и он только меняется на дно ... что означает, что он выходит из "volSlider" на дно. никаких взлетов.
Вот и все - работает jsfiddle: jsfiddle.net/8u3Ez . Если бы вы могли объяснить свои проблемы дальше, хотя.
Это определенно что-то еще. Работает отлично. Спасибо!