17

Web ページでマウス カーソルに色を割り当てるにはどうすればよいですか?

HTML、CSS、JavaScriptなどのテクノロジーを使用してそれを行う方法を誰かが提案できますか?

4

3 に答える 3

18

画像を提供せずにカーソルを動的に追加する可能性を追加するだけですが、JavaScript と Canvas を使用してクライアントで生成します。

デモには形状で描画された単純なカーソルが含まれていますが、これはイメージ、ビデオなど (キャンバスがサポートするすべてのもの) である可能性があります。

Fiddle (Firefox 用に 2016 年 5 月に更新 - ドキュメントから要素に移動) .

注: FireFox では、このデモのようにカーソルが頻繁に変更されると問題が発生します。1 秒に 1 回だけ変更されるように更新されます。FF は新しい画像を設定するときにカーソルをクリアしますが、新しい画像をデコードする必要があるため、その間はデフォルトが表示されます。Chrome は、画像がデコードされるまで待機してから切り替えます。

いずれにせよ、キャンバスを使用して実行できることを示すだけです-Chromeを使用してデモをテストし、マウスを頻繁に変更しないでください:-)。

デモ用にランダムに色を変えるアニメーション ループ:

function loop() {

    var color = 'rgb(' + ((255 * Math.random())|0) + ','
                       + ((255 * Math.random())|0) + ','
                       + ((255 * Math.random())|0) + ')';
    makeCursor(color);

    setTimeout(loop, 1000);
}

カーソル メーカー:

function makeCursor(color) {

    // create off-screen canvas
    var cursor = document.createElement('canvas'),
        ctx = cursor.getContext('2d');

    cursor.width = 16;
    cursor.height = 16;

    // draw some shape for sake of demo
    ctx.strokeStyle = color;

    ctx.lineWidth = 2;
    ctx.moveTo(2, 10);
    ctx.lineTo(2, 2);
    ctx.lineTo(10, 2);
    ctx.moveTo(2, 2);
    ctx.lineTo(30, 30)    
    ctx.stroke();

    // set image as cursor (modern browsers can take PNGs as cursor).
    element.style.cursor = 'url(' + cursor.toDataURL() + '), auto';
}
于 2013-09-13T06:47:18.080 に答える
1

カスタマイズされたカーソルを作成/検索する必要があります。次に、cursorCSS プロパティを使用して Web サイトに含めます。

これに関するチュートリアルがここにあります: http://www.axialis.com/tutorials/use-cursors-to-customize-websites.htm

于 2013-09-13T06:14:05.710 に答える