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

我试图根据鼠标位置更改元素（在本例中为a.png）的不透明度

我发现了这个关于颜色的好例子：

但我很困惑，我如何才能做到这一点与不透明。 我想要同样平滑无缝的效果

非常感谢您的帮助

这相当简单：

我删掉了整件调整大小的事情，因为这对我来说毫无意义

<div id="wrapper"><h1></h1></div>

$(function(){
    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);

    });
});

<div id="wrapper"><h1></h1></div>

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

$win.resize(getWidth).mousemove(function(e) {

    opacity = (e.pageX/w) * (e.pageY/h);
    $('h1').text(opacity);

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

}).resize();