用鼠標位置改變不透明度

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