如何使用这个jQuery来实现css的不透明度

How to use this jQuery to effect css opacity

本文关键字：实现 css 不透明度 jQuery 何使用      更新时间：2023-09-26

我得到了一段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提供任何建议，我们将不胜感激！
圣诞快乐！

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

  $('#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>

如果您可以看到给定的函数返回一个值作为不透明度。并且当鼠标移动时调用该函数。 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.
})

上面的所有代码都应该在你的函数中。

相关文章：