用鼠标位置更改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不透明度

回答

相关问题