0

背景画像がある移動する div を作成しようとしています。さて、この div にはoverflow: hidden. 同じ画像を含む 2 つの画像タグを作成しました。1 つ目は背景の壁紙でgrayscale(100%)、2 つ目は div 内にあり、オーバーフローが非表示になっています。

ここで、画像を内部に持つ div を移動するためにイベントをjquery配置しmousemoveます (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 に答える