移动 div 时隐藏的溢出不起作用

我正在尝试制作一个移动的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>

尝试将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>

相关内容

最新更新

热门标签：