javascript - 使用 JavaScript 的带背景图像的径向光标

Question

我正在尝试在带有背景图像的网站上创建径向光标。

我目前有两个问题:

1. 目前它适用于 Chrome，但不适用于 Firefox。当“背景”发生时，我收到一个解析错误。
2. 在 Chrome 上，有时会出现两个光标而不是 1 个，并且看起来像是镜像的，这可以在 JSFiddle 中看到。

我目前正在使用以下代码，取自 here .

我该如何解决这个问题？谢谢!

.

CSS:

        html { 
      background: url("blocpartylandscape.jpg") no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

Javascript:

        $(function() {

        var originalBGplaypen = $("html").css("background"),
            x, y, xy, bgWebKit, bgMoz,
            lightColor = "rgba(255,255,255,0.75)",
            gradientSize = 100;

        var originalBG = $('html').css("background");

            $('html')
            .mousemove(function(e) {

                   x  = e.pageX - this.offsetLeft;
                   y  = e.pageY - this.offsetTop;
                   xy = x + " " + y;

                   bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", 100, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), " + originalBG;
                   bgMoz    = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBG + " " + gradientSize + "px)";

                    $(this)
                        .css({ background: bgWebKit })
                        .css({ background: bgMoz });


            }).mouseleave(function() {
                $(this).css({ background: originalBG });
            }); 

    });

Answer 1

为了让 Firefox 变得更简单，我添加了另一个 HTML 元素。该元素是包含 body 中所有内容的容器。我这样做是为了让 html 元素可以拥有其持久的背景图像，并且不会受到竞争的径向光标背景(也是图像)的干扰。 Chrome 可以共享背景图像和径向光标的 html 元素，但 Firefox 不行。

<div class="container">
  <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas in diam vitae elementum. </h1>
</div>

我使用新添加的容器作为 Canvas 来显示径向光标。

.container {
  height: 100vh;          
}

现在，在 JavaScript 中，我只需使用新的容器元素来显示径向背景。

$(".container")
  .css({ background: bgWebKit })
  .css({ background: bgMoz });

然后删除径向光标。

.mouseleave(function() {
  $(".container").css({ background: originalBG });
}); 

Firefox 还需要一个 rgb 或 rgba 值，而不是您对后台调用返回的任何值。该值不是径向背景的有效参数，但以下内容是有效的:

bgMoz = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, rgba(255,255,255,0.0) " + gradientSize + "px)";

您可能需要进行更多重构。我的主要目标是让事情为你服务。下面是一个适用于 Chrome 和 Firefox 的演示。

https://jsfiddle.net/7d17ufm7/