是否可以改变背景的不透明度,但只能在光标区域下方(例如白色小圆圈)?我认为它有点像基本的热图,但热量不会停留 - 它只是跟随光标。
目前我有以下内容
HTML:
html {
background-color: #000;
width: 100%;
height: 100%;
}
JS:
$(document).mousemove(function(event){
var i = event.pageX.toPrecision(1) / 1000;
$("html").css('opacity', i)
});
抱歉,这可能是一个非常基本的起点。我需要使用 Canvas 吗?
最佳答案
你可以使用 svg 来做到这一点
我做了什么:-
我放置了两个具有相同坐标、高度和宽度的相同图像,并在鼠标移动圆的位置时给顶部的图像(具有完全不透明)一个圆形 clip-path
变化
$('svg').on('mousemove',function(e){
$('.a').attr('cx',e.pageX).attr('cy',e.pageY)
})
.one{
opacity:.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="500" height="500">
<clippath id="clip" >
<circle cx="50" cy="50" r="50" class="a"/>
</clippath>
<image xlink:href="https://images.unsplash.com/photo-1474575981580-1ec7944df3b2?dpr=1&auto=format&fit=crop&w=1500&h=934&q=80&cs=tinysrgb&crop=&bg=" width="500" height="500" x="0" y="0" class="one"/>
<image xlink:href="https://images.unsplash.com/photo-1474575981580-1ec7944df3b2?dpr=1&auto=format&fit=crop&w=1500&h=934&q=80&cs=tinysrgb&crop=&bg=" width="500" height="500" x="0" y="0" clip-path="url(#clip)"/>
</svg>
关于javascript - 根据鼠标位置更改区域的不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30099847/