0

我正在尝试制作一个有背景图像的移动 div。现在，这个 div 有一个overflow: hidden. 我制作了两个包含相同图像的图像标签。第一个是背景壁纸，grayscale(100%)第二个是隐藏溢出的div内部。

现在，jquery我将mousemove事件放入其中以移动包含图像的 div（div 的 id 是'#color_peek'）。但是里面的图像不应该移动，好像给它一个彩色放大镜之类的效果。

我的问题是它overflow: hidden不起作用。

这是片段：

$(document).ready(function() {
  $(document).mousemove(function(event) {
    $('#color_peek').css({
      top: (event.pageY - ($('#color_peek').width() / 2)) + 'px',
      left: (event.pageX - ($('#color_peek').height() / 2)) + 'px'
    });
  });
});
body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.wallpaper {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 1366px;
  height: 768px;
  -webkit-filter: brightness(100%) contrast(120%);
  z-index: -1000;
}

.actual {
  -webkit-filter: grayscale(100%);
}

#color_peek {
  position: relative;
  width: 100px;
  height: 100px;
  border: 2px solid white;
  border-radius: 50px;
  overflow: hidden;
}

#color_peek img {
  position: fixed;
  top: 0px;
  left: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <img src="http://usa-wallpapers10.net/wp-content/uploads/images/22/mardi-gras.jpg" class="wallpaper actual">
  <div id="color_peek">
    <img src="http://usa-wallpapers10.net/wp-content/uploads/images/22/mardi-gras.jpg" class="wallpaper">
  </div>
</body>

4

1 回答 1

0

尝试使用background: url('image_url') fixed;放大镜元素。

我提供了一个简单的示例，您应该能够在此基础上开发您的解决方案：

$(document).ready(function() {
  $(document).mousemove(function(event) {
    $('#color_peek').css({
      top: (event.pageY - ($('#color_peek').width() / 2)) + 'px',
      left: (event.pageX - ($('#color_peek').height() / 2)) + 'px'
    });
  });
});
body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background: url('http://usa-wallpapers10.net/wp-content/uploads/images/22/mardi-gras.jpg');
}

#color_peek {
  position: relative;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  border-radius: 50px;
  background: url('http://usa-wallpapers10.net/wp-content/uploads/images/22/mardi-gras.jpg') fixed;
  -webkit-filter: brightness(150%) contrast(150%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id="color_peek">
  </div>
</body>

于 2013-10-02T09:36:51.310 回答