让div用鼠标打开而不是点击

Question

我做了这个： 这个 在右侧你会看到一个红色按钮。当你点击红色按钮时。带有文本的内容屏幕即将出现。但我对此有一个疑问。我可以用其他动画制作这个吗？如果你按住鼠标。然后就可以滑动打开了。将鼠标按钮向左移动。然后内容框打开。你明白吗？我希望你能帮助我。

你可以在jsfiddle上看到代码。您可以在那里更改它。我希望你能帮助我。我是一个初级 JavaScript 开发者。以及如何 不知道我该如何做到这一点。

Answer 1

要实现拖动，您可以使用 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));
        }
    });
});

Answer 2

这是一个更新的小提琴。 基本上我只是做了几件事：

• 将处理程序从“click”更改为向“mouseenter”
• 添加了一个“mouseleave”处理程序，它执行相反的操作
• what-is-delicious”容器上，而不是

代码：

$(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 {
        }
    });
});

将处理程序放在“ “preventDefault()”调用不再是真正必要的，但我把它们留在那里。

Answer 3

我假设您正在 OnClick() 事件中当前切换 DIV 的 Style.Display。
可以从 Hover() 或 MouseOver() 调用相同的代码