Блог

Главная - Вопросы по программированию - создайте слайдер с помощью мыши с помощью jquery с нуля

создайте слайдер с помощью мыши с помощью jquery с нуля

#jquery #html #css #slider

#jquery #HTML #css #слайдер

Вопрос:

Я пытаюсь создать слайдер, подобный:

http://jqueryui.com/demos/slider/

В основном идея чем-то очень похожа на базовый слайдер в демонстрации, за исключением того, что в ручке, который вы нажимаете мышью, чтобы сдвинуть, будут цифры, которые меняются, когда вы доходите до определенных точек. Я думаю, что смогу разобраться с числовой частью, но я полностью застрял на том, с чего начать.

Я хочу сделать это с нуля с помощью jquery … поэтому никаких плагинов. Если кто-нибудь знает какие-либо учебные пособия или где-нибудь, с чего я мог бы начать, это было бы здорово.

Спасибо

Ответ №1:

Зависит. Если вы хотите сделать это для ознакомления, я бы рекомендовал взглянуть на исходный код jQuery UI 😉

Если вы хотите сделать это, потому что пользовательский интерфейс jQuery слишком «тяжелый», то к вашему сведению, вы можете настроить, какие его части вы загружаете / используете.

Редактировать

Попробуйте: https://developer.mozilla.org/en/DragDrop/Drag_and_Drop

Комментарии:

1. Я все еще не хочу использовать плагин, поэтому вариант 2 исключен. Мне действительно нужны знания, но есть много кода, который не нужен для варианта 1. Я думаю, что если я разберусь с перетаскиванием, я мог бы получить большую часть этого … не знал, есть ли какие-либо учебные пособия, в которых не используются плагины любого вида

Ответ №2:

Это то, что у меня есть, и это работает.

 //sets the current position and offset variables
    var currentPosition;
    var offset;
    var rightOffset

    //looks for the mousedown event on the slider
    $("#slider").mousedown(function(e){
        //sets the offset = to the mouse coordinate of the page - the offset of the slider
        offset = e.pageX - this.offsetLeft;
        console.log("offset: "   offset);
        $(document).bind('mousemove', mmHandler);
    }); 

    var mmHandler = function (e) {

            currentPosition = e.pageX - offset;

            //takes the mouse current position (minues the offset) and sets an absolute position
            $('#slider').css('left', currentPosition   "px");
            console.log("CURRENT POSITION: "   currentPosition);

            //checks to make sure it's within the box
            if(currentPosition <= 0){
                $('#slider').css('left', 0   "px");
            }else if(currentPosition >= 380){
                $('#slider').css('left', 400-20   "px");    
            }

            $("#slider").text($("#slider").css('left'));

        };


    $(document).mouseup(function(e) {
      $(document).unbind('mousemove', mmHandler);
    });