如何使用此jQuery来影响CSS的不透明度

Question

我得到了一块jQuery，用于查找用户鼠标的位置，并且鼠标越靠近中心，它对页面上元素的不透明度的影响就越大。 理想的效果是，随着鼠标靠近中心，淡入淡出，全屏徽标逐渐变为不透明：0，背景从黑色变为白色，并且显示白色文本。 这是我得到的代码：

$('body').on('mousemove', function(e) {
var x_val = 2 *(e.pageX - $(window).scrollLeft()) / $(window).width() - 1,
    y_val = 2 * (e.pageY - $(window).scrollTop()) / $(window).height() - 1,
    opacity = (1 - Math.abs(x_val)) * (1 - Math.abs(y_val));

    console.log(opacity)
});

现在，我是jQuery的新手，您可以就如何以所需的方式使此CSS效果影响我的CSS的任何建议，深表感谢！
圣诞节快乐！

Answer 1

首先，您将需要添加要更改其不透明度的元素。

  $('#body').on('mousemove', function(e) { var x_val = 2 * (e.pageX - $(window).scrollLeft()) / $(window).width() - 1, y_val = 2 * (e.pageY - $(window).scrollTop()) / $(window).height() - 1, opacity = (1 - Math.abs(x_val)) * (1 - Math.abs(y_val)); $(".MyDiv,.something").css("opacity", opacity); });

 .MyDiv { background-color: red; height: 100px; width: 100px; margin: 0 auto; display: block; margin-top: 150px } .something { text-align:center; vertical-align:middle; } #body { width: 400px; height: 400px; border: 1px solid #000; }

 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <div id="body"> <div class="MyDiv"></div> <h3 class="something">Something else</h3> </div>

Answer 2

如果可以看到给定的函数返回不透明度的值。 移动鼠标时会调用该函数。 e表示鼠标悬停在上方的元素。 因此，请使用以下代码将该元素作为元素并设置不透明度。

$(e.target).css('opacity',opacity)

这会将悬停元素设置为计算值的不透明度。 现在会有另一个问题，当鼠标离开时，元素仍将包含之前给出的不透明度。

因此，您应该像这样将事件绑定到上述元素。

$(e.target).bind('mouseleave',function(){
    $(this).css('opacity','100') ;
    $(this).unbind('mouseleave'); //this will remove unwanted event binds after mouse has left.
})

以上所有代码都应包含在您的函数中。

如何使用此jQuery来影响CSS的不透明度

问题描述

2 个解决方案

解决方案1
-1 已采纳 2014-12-24 04:37:02

解决方案2
-1 2014-12-24 04:39:15

如何使用此jQuery来影响CSS的不透明度

问题描述

2 个解决方案

解决方案1 -1 已采纳 2014-12-24 04:37:02

解决方案2 -1 2014-12-24 04:39:15

解决方案1
-1 已采纳 2014-12-24 04:37:02

解决方案2
-1 2014-12-24 04:39:15