17

如何为网页中的鼠标光标分配颜色？

任何人都可以建议我使用任何技术（例如 HTML、CSS、JavaScript）来做到这一点吗？

4

3 回答 3

18

只是为了增加动态添加光标而不提供图像但在客户端使用 JavaScript 和 Canvas 生成它的可能性。

Demo 包含一个用形状绘制的简单光标，但这也可以是图像、视频等（所有画布都支持）。

Fiddle （为 Firefox 更新 5/2016 - 从文档移动到元素）。

注意：当光标在这个演示中如此频繁地更改时，FireFox 会出现问题 - 更新为每秒仅更改一次。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 回答
17

使用图像和 CSScursor属性，我认为这里不需要 JavaScript...

演示

div {
   cursor: url(YOUR_IMAGE_URL), auto;
}

正如评论的那样，我使用auto的只是default cursor以防您的图像无法加载，就像我们声明多个字体系列一样。

于 2013-09-13T06:11:29.593 回答
1

您应该创建/查找自定义光标。然后，使用cursorCSS 属性将其包含在您的网站上。

这里有一个教程：http ://www.axisis.com/tutorials/use-cursors-to-customize-websites.htm

于 2013-09-13T06:14:05.710 回答