是否可以更改背景的不透明度,但仅限于光标区域下方(例如白色小圆圈)?我觉得它有点像基本热图,但热量不会停留 – 它只是跟随光标.
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) });
对不起,这可能是一个非常基本的起点.我需要使用帆布吗?
解决方法
你可以使用svg来做到这一点
我做了什么 :-
我放置了两个相同的坐标,高度和宽度的相同图像,并给出了一个圆形的剪辑路径到顶部的一个(具有完全不透明度)当鼠标移动圆圈的位置也改变
$('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>
原文地址:https://www.jb51.cc/js/158263.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。