用鼠标位置改变不透明度

Question

我试图根据鼠标位置改变一个元素（在这个例子中为.png）的不透明度。

我发现这个很好的例子颜色：http://jsfiddle.net/WV8jX/

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

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

rgb = [ 
    Math.round(e.pageX/w * 255), 
    Math.round(e.pageY/h * 255), 
    150 
]; 

$(document.body).css('background','rgb('+rgb.join(',')+')'); }).resize(); 

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

所有帮助将不胜感激！

Answer 1

这是相当简单：

JSFiddle

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

    }); 
}); 

我编辑了整个调整大小的东西，因为它没有任何意义，我。

Answer 2

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

http://jsfiddle.net/WV8jX/159/

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();