jquery - mask 图像以使其看起来像双筒望远镜

Question

我一直在尝试获得一个输出，其中图像被屏蔽在双目形状元素内。圆形部分随着鼠标光标移动，无论鼠标走到哪里，它都会显示图像的部分。还需要设置鼠标不离开主容器。

输出图像:

其余部分将保持黑色，并且在鼠标移动时只有该形状中的元素可见。

我尝试过以下代码:

  $('.clipping-cursor').on('mousemove', function(e) {

    var parentOffset = $(this).parent().offset();
    var relativeXPosition = (e.pageX - parentOffset.left); //offset -> method allows you to retrieve the current position of an element 'relative' to the document
    var relativeYPosition = (e.pageY - parentOffset.top);

    $('.clipping-cursor').css({
      left: relativeXPosition,
      top: relativeYPosition
    });
  });

.collaborate-wrapper {
  width: 100%;
  height: 90vh;
  background: #000;
  overflow: hidden;
  position: relative;
}
.clipping-cursor {
  width: 1000px;
  height: 580px;
  box-sizing: border-box;
  position: absolute;
  margin-top: -290px;
  margin-left: -500px;
  background-image: url('../images/background/collaborate-2.svg');
  background-repeat: no-repeat;
  background-size: container;
  background-attachment: fixed;
  background-position: center center;
  -webkit-mask-image: url('../images/masking-circle.svg');
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  border: 1px solid #fff;
  cursor: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collaborate-wrapper">
  <div class="clipping-cursor">

  </div>
</div>

Answer 1

您可以使用 SVG 和一些 JS 来更改 mousemove 上的位置

$(".a").mousemove(function(e) {
  var parentOffset = $(this).parent().offset();
  var relX = (e.pageX - parentOffset.left) - 55;
  var relY = (e.pageY - parentOffset.top) - 30;

  $('mask g').attr('transform', 'translate(' + relX + ',' + relY + ')');
});

.a {
  width: 400px;
  height: 200px;
  background: url('http://cdn.images.express.co.uk/img/dynamic/151/590x/secondary/Planet-Nine-443937.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  display: inline-block;
}
svg {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <svg x="0px" y="0px" width="400px" height="200px" viewBox="0 0 400 200">
    <mask id="mask">
      <rect width="100%" height="100%" x="0" y="0" fill="white" />
      <g transform="translate(0, 0)">
        <circle cx="30" cy="30" r="30" />
        <circle cx="85" cy="30" r="30" />
      </g>
    </mask>
    <rect x="0" y="0" class="one" mask="url(#mask)" width="400" height="200" />
  </svg>
</div>