我得到了一段 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/