Сделайте div открытым с помощью мыши и не нажимайте - PullRequest
Новая
       17

Сделайте div открытым с помощью мыши и не нажимайте

0 голосов
/ 21 октября 2011

Я сделал это: Это Справа вы видите красную кнопку.При нажатии на красную кнопку.Скоро появится экран с текстом.Но у меня есть вопрос об этом.Могу ли я сделать это с другой анимацией.Если вы держите мышь.Тогда вы можете открыть.С помощью кнопки мыши влево.Затем откроется окно с контентом.Ты понимаешь это?Я надеюсь, что вы можете мне помочь.

Вы можете увидеть код на jsfiddle.И вы можете изменить это там.Я надеюсь, что вы можете мне помочь.Я начинающий javascripter.И как И понятия не имею, как я могу это сделать.

Ответы [ 3 ]

1 голос
/ 21 октября 2011

Вот обновленная скрипка. По сути, я только что сделал пару вещей:

  • Изменил обработчик с "click" на "mouseenter"
  • Добавлен обработчик «mouseleave», который делает противоположное
  • Поместите обработчики в контейнер «что вкуснее» вместо <a>

Код: 

$(function () {
    "use strict"
    var box = $(".what-is-delicious"),
        button = $(".what-is-delicious > a");
    box.mouseenter(function (e) {
        e.preventDefault();
        if ($(button).hasClass("open")) {

        } else {
            $("body").append('<div class="background-overlay"></div>');
            button.addClass("open");
            box.animate({ right: "0"}, 750);
        }
    }).mouseleave(function (e) {
        e.preventDefault();
        if ($(button).hasClass("open")) {
            $("body").find('div.background-overlay').remove();
            button.removeClass("open");
            box.animate({ right: -303}, 750);

        } else {
        }
    });
});

Вызовы "protectDefault ()" больше не нужны, но я оставил их там.

1 голос
/ 21 октября 2011

Для реализации перетаскивания вы можете использовать mousedown / mouseup / mousemove, например: http://jsfiddle.net/pimvdb/25y4K/8/.

$(function () {
    "use strict";
    var box = $(".what-is-delicious"),
        button = $(".what-is-delicious > a");

    var mouseDown = false,
        grabbed   = 0,
        start     = -303;

    button.mousedown(function(e) {
        mouseDown = true;
        $('*').bind('selectstart', false); // prevent selections when dragging
        grabbed = e.pageX; // save where you grabbed
        $("body").append('<div class="background-overlay"></div>');
    });

    $('body').mouseup(function() {
        mouseDown = false;
        $('*').unbind('selectstart', false); // allow selections again
        $(".background-overlay").remove();
        start = parseInt(box.css('right'), 10); // save start for next time
                                                // (parseInt to remove 'px')

    }).mousemove(function (e) {
        if(mouseDown) { // only if you are dragging
            // set right to grabbed - pageX (difference) + start 'right' when started
            // dragging. And if you drag too far, set it to 0.
            box.css("right", Math.min(grabbed - e.pageX + start, 0));
        }
    });
});
0 голосов
/ 21 октября 2011

Я предполагаю, что вы переключаете Style.Display DIV в настоящее время в событии OnClick ()Тот же код может быть вызван из Hover () или MouseOver ()

...