Деление текста следуйте за курсором через Javascript / Jquery

Question

Я хотел, чтобы динамическое разделение контента сопровождало вас курсором в пространстве веб-браузера.

Я не профессионал в JS, поэтому я потратил 2 часа, чтобы наконец отладить очень глупый способ сделать это.

$(document).ready(function () {
    function func(evt) {
        var evt = (evt) ? evt : event;
        var div = document.createElement('div');

        div.style.position = "absolute";

        div.style.left = evt.clientX + "px";

        div.style.top = evt.clientY + "px";
        $(div).attr("id", "current")

        div.innerHTML = "CURSOR FOLLOW TEXT";

        $(this).append($(div));

        $(this).unbind()
        $(this).bind('mousemove', function () {
            $('div').remove("#current");

        });

        $(this).bind('mousemove', func);

    }

    $("body").bind('mousemove', func)
});

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

Есть ли способ сделать это проще, быстрее и интуитивнее.

Я знаю, что вы можете использовать технику изображения курсора, но это то, чего я хочу избежать.

Заранее спасибо.

Answer 1

На основании ответа Alconja это может работать лучше:

$(document).ready(function () {
    //create the div
    var div = $("<div/>",{
        'css': {
            "position": "fixed"
        },
        'text': "CURSOR FOLLOW TEXT"
    }).appendTo("body");

    //attach the mousemove event
    $(window).bind('mousemove mouseover', function(evt) {
        div.offset({left:evt.pageX, top: evt.pageY});
    });
});

Answer 2

Проблема с производительностью связана с тем, что вы создаете / уничтожаете div каждый раз, когда происходит событие mousemove (а также привязываете / отменяете привязку события). Вы можете значительно упростить его, создав один раз div, прикрепив его к документу, а затем просто переместив его на событие mousemove, как показано ниже:

$(document).ready(function () {
    //create the div
    var div = $("<div></div>").css("position", "absolute").text("CURSOR FOLLOW TEXT").appendTo("body");

    //attach the mousemove event
    $("body").bind('mousemove', function(evt) {
        div.css({
            "left": evt.pageX + "px",
            "top": evt.pageY + "px"
        });
    });
});