javascript - 如何使用这个 jQuery 来影响 css 不透明度

标签 javascript jquery html css

我得到了一段 jQuery,用于查找用户鼠标的位置,鼠标越靠近中心,它对页面上元素的不透明度的影响就越大。当鼠标靠近中心时,所需的效果将是淡入淡出,全屏 Logo 淡入不透明度: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>

关于javascript - 如何使用这个 jQuery 来影响 css 不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27631436/

相关文章:

javascript - 为什么 jQuery 选择器不起作用?

jquery - IE8 切换类无法正常工作

javascript - knockoutJS 中的验证码不起作用

javascript - jquery prev() 返回 undef

JavaScript:如何下载文件,然后强制重新加载页面?

Javascript 客户端 - 从网页上的现有图像创建新图像

javascript - 在 Firefox 中捕获弹出窗口并通知用户

javascript - polymer 将 Tap 绑定(bind)到对象方法

javascript - 在选择中检查javascript

html - 文本/标题中的内联列表