屏蔽图像使其成为双目视图

Question

我一直试图获得一个输出，其中图像被掩盖在双目形状元素内。圆形部分随鼠标光标移动，鼠标移动的任何地方都会显示图像的一部分。还需要设置鼠标不要走出主容器。

输出图片：

其余部分将保持黑色，只有在鼠标移动时该元素才会显示。

我尝试过以下代码：

＆＃13;

＆＃13;

  $('.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
    });
  });

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用SVG和某些JS更改mousemove

上的位置

＆＃13;

＆＃13;

$(".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 + ')');
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;