jquery - 圆圈覆盖在内容下方相乘
问题描述
悬停时如何让圆圈乘以副本?实现背景混合模式:乘法;只影响圈内的内容。
目标是让红圈乘以下面的内容
jQuery(document).ready(function() {
var mouseX = 0, mouseY = 0;
var xp = 0, yp = 0;
$(document).mousemove(function(e){
mouseX = e.pageX - 30;
mouseY = e.pageY - 30;
});
setInterval(function(){
xp += ((mouseX - xp)/6);
yp += ((mouseY - yp)/6);
$("#circle").css({left: xp +'px', top: yp +'px'});
}, 20);
});
body{
position: relative;
height: 100%;
width : 100%;
margin: 0;
background-color: red;
}
h1{
padding: 50px;
text-align: center;
z-index: 10;
background-color: none;
font-family: Helvetica;
font-size: 100px;
}
.circle {
/* z-index: -10;*/
position: absolute;
background-blend-mode: multiply;
background-color: red;
width: 200px;
height: 200px;
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1> WORDS HERE </h1>
<span id="circle" class="circle"></span>
解决方案
推荐阅读
- javascript - 在 Windows 命令中转义双引号
- javascript - 为什么我的 django 异常处理不起作用
- javascript - 从 JavaScript 数组名称值对动态添加多个系列的 highcharts
- typescript - 将 Sharepoint 在线列表中的数据输出放入 HTML 表中
- firebase - Firestore - 如何建模和查询 2 个集合的关系 - IOT 用例
- javascript - 使用 React 渲染 HTMLAudioElement DOM 元素
- android - 当我在 Android Studio 中使用 if 时期望成员声明
- javascript - 在 Monaco Editor 中显示错误的快速修复
- javascript - ReactJs useState .map() 不是函数
- java - 如何将这种递归解决方案转换为分而治之?