用鼠標位置更改div不透明度

我想根據鼠標位置使元素的不透明度發生變化。我在這裏找到了這個解決方案 - Changing Opacity with Mouse Position - 但我需要一個修改。我正在尋找不透明度爲0的垂直和水平中心的元素。離中心越遠，不透明度越高。用鼠標位置更改div不透明度

這裏是我的dev頁：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); 

});

來源

2014-11-04 bjornfloki

設置的centerX爲水平中心，然後centerY是垂直居中的位置。通過將當前X和當前Y位置的模值組合到中心X和中心Y來計算不透明度。

狀混濁= [1-（的centerX％currentX）] + [1-（centerY％currentY）]

來源

2014-11-04 06:40:28

我認爲這將有助於ý

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

來源

2014-11-04 07:01:59 user4213175

這裏是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); 

    }); 

});

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>

來源

2014-11-04 10:26:42

文卡塔，一個美妙的解決方案，非常感謝你！它的工作原理就像它應該除了不透明度應該顛倒 - 我正在尋找不透明度在中心0，在其他邊緣1。現在它在中心是1，在外邊緣是0：http://www.bjornfloki.com/dev/spoon（請注意，該函數被應用於一個空的PNG以產生背景效果，而不是bg- eyes.jpg圖片） – bjornfloki 2014-11-05 22:40:53

哎呀！那被忽略了。我只是通過反轉更新並從您的網站獲取一些html，並將其添加到小提琴和這裏，看看。 – 2014-11-06 00:07:55

你真了不起我的朋友！我完全按照您提供的代碼使用了該代碼，但在腳本中，我用#gradient替換了#scene，以完全按照我的意圖獲取外觀。再次感謝！ – bjornfloki 2014-11-06 02:20:35

用鼠標位置更改div不透明度

回答

相關問題