3

JavaScript を使用して、カーソルをカスタム画像の代わりに HTML 要素 (div や canvas など) に置き換えることは可能ですか? 一部のシナリオでは、カーソルを画像以外の HTML 要素に置き換えると便利ですが、現在これを行う方法はわかりません。

4

3 に答える 3

5

これは、利点または欠点として見ることができる jQuery のソリューションです。jQuery を使用した理由は、クロス ブラウザーのマウス ポジションのサポートと強力 + 簡単な.css機能です。

コード (Javascript)

var ElementCursor = {
    cursorElement: "",
    setCursor: function (cursorId) {
        $('html').css({
            'cursor': 'none',
        });
        ElementCursor.cursorElement = cursorId;
        ElementCursor.updateCursor();
    },
    removeCursor: function () {
        $('html').css({
            'cursor': ''
        });
        ElementCursor.cursorElement = '';
    },
    updateCursor: function () {
        $(document).mousemove(function (e) {
            $('#' + ElementCursor.cursorElement).css({
                'position': 'fixed',
                'user-select': 'none',
                'top': e.pageY + 2 + 'px',
                'left': e.pageX + 2 + 'px'
            });
        });
    }
};

ElementCursor.setCursor("cursor");

それを Javascript に追加した後、呼び出すだけでElementCursor.setCursor(id_of_your_cursor_element_here)、カーソルがその要素に自動的に置き換えられます。もうそのカーソルは必要ありませんか? 電話ElementCursor.removeCursor()して、あなたの道を進んでください。

于 2013-03-09T19:51:23.127 に答える
1

置換とは、カーソルの画像をHTML要素に変更することを意味する場合、いいえ-カーソルCSSプロパティの動作は次のとおりです。

あなたができることは、カーソルを非表示にし、カーソルの周りに続く絶対位置要素を持つことです。

<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("body").mousemove(function(event){
                $("#cursor").css("left", event.pageX)
                $("#cursor").css("top", event.pageY)
            })
        })
    </script>
    </head>
    <body style="cursor:none">
    <div id="cursor" style="position:absolute">hello</div>
    </body>
</html>
于 2013-03-09T18:31:56.540 に答える
1

編集 忘れました：

cursor: none;

HTML

<div id="mydiv">
    <canvas id="mycanvas" width="50" height="50"></canvas>
</div>

CSS

#mydiv
{
    position: fixed;
    top: 0px;
    left: 0px;
    width:1000px;
    height: 1000px;
    background-color: red;
}

#mycanvas
{
    position: relative;
    top: 0px;
    left: 0px;
    background-color: black;
}

ジャバスクリプト

function Thing(x, y)
{
    this.x = x;
    this.y = y;
}

var mousePos = new Thing(0, 0);

mydiv = document.getElementById("mydiv");
mycanvas = document.getElementById("mycanvas");

mydiv.addEventListener('mousemove', function(event)
{
    mousePos.x = event.clientX;
    mousePos.y = event.clientY;

    mycanvas.style.top = mousePos.y + "px";
    mycanvas.style.left = mousePos.x + "px";
    console.log(mycanvas.style);
}, false);

こちらで遊べます

于 2013-03-09T18:33:26.190 に答える