使用鼠标位置更改 div 不透明度

Question

我正在尝试根据鼠标位置更改元素的不透明度。我在这里找到了这个解决方案——Changing Opacity with Mouse Position——但我需要修改一下。我正在寻找元素的垂直和水平 center 中的不透明度为 0。离中心越远，不透明度越高。

这是我的开发页面：http://www.bjornfloki.com/dev/spoon

我正在使用以下脚本：

var $win = $(window),
w = 0,h = 0,
opacity = 1,
getWidth = function() {
    w = $win.width();
    h = $win.height();
};

$win.mousemove(function(e) {
    getWidth();
    opacity = (e.pageX/w * 0.5) + (e.pageY/h * 0.5);

    $('#myElement').css('opacity',opacity);

});

Answer 1

将 centerX 设置为水平中心的位置，然后将 centerY 设置为垂直中心。 通过将 currentX 和 currentY 位置的模与 centerX 和 centerY 相结合来计算不透明度。

像不透明度 = [1-(centerX % currentX)] + [1-(centerY % currentY)]

Answer 2

我认为这对你有帮助

    var window_xy_addition = $(window).height() + $(window).width();
    var mouse_position_xy_addition = event.pageY + event.pageX;
    $("#change_opacity").css("opacity", (mouse_position_xy_addition/window_xy_addition));

Answer 3

这里是Plunker - Preview

Working Fiddle

脚本

$(function () {
    $(document).on("mousemove", function (e) {
        var me = $("#scene"),
            cx = me.offset().left + me.width() / 2,
            cy = me.offset().top + me.height() / 2,
            d = (Math.sqrt(Math.pow(cx, 2) + Math.pow(cy, 2))),
            md = (Math.sqrt(Math.pow(e.pageX - cx, 2) + Math.pow(e.pageY - cy, 2)));
        me.css('opacity', md / d);
 -webkit-transition:all 0.5s ease-out;
    });

});

HTML

<ul id="scene" class="scene" style="position: relative;">
    <li class="layer beresponsive" data-depth="0" style="position: relative; display: block; left: 0px; top: 0px; transform: translate(0px, 0px);">
        <img src="http://www.bjornfloki.com/wp-content/themes/wordpress-bootstrap-master-child/images/bg-eyes.jpg" />
    </li>
    <li class="layer" data-depth="00" style="position: absolute; display: block; left: 0px; top: 0px; transform: translate(0px, 0px);">
        <img id="gradient" src="http://www.bjornfloki.com/wp-content/themes/wordpress-bootstrap-master-child/images/empty.png" style="opacity: 0.196366554362154;" />
    </li>
    <li class="layer" data-depth="00" style="position: absolute; display: block; left: 0px; top: 0px; transform: translate(0px, 0px);">
        <img src="http://www.bjornfloki.com/wp-content/themes/wordpress-bootstrap-master-child/images/spoon-logo-1920.png" />
    </li>
</ul>