Question

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

我目前有两个问题：

目前适用于Chrome，但不适用于Firefox。我收到＆＃34; background＆＃34;的解析错误当它发生时。
在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>

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

.container {
  height: 100vh;          
}

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

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

然后删除径向光标。

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

Firefox还需要一个rgb或rgba值，而不是你对back的回调。该值不是径向背景的有效参数，但以下内容有效：

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/

径向光标与背景图像使用JavaScript

1 个答案: