Question

我正在为我的手电筒效果建模this tutorial。

我遇到的问题是当窗口宽度大于我的实际容器时。发生这种情况时，手电筒不再以光标为中心。

请查看此fiddle以获得更好的理解。 Fiddle

上的结果链接

$(document).ready(function(){
  $('.content-wrap').mousemove(function(e) {
    $('#flashlight').css({
      'left': e.clientX-960,
      'top': e.clientY-523
    });
  });
});

.content-wrap {
  max-width:960px;
  width:100%;
  min-height: 592px;
  margin:0 auto;
  position: relative;
  overflow: hidden;
  background: blue;
}

#flashlight {
  background: url(https://s3.amazonaws.com/ip-devs/AllState/keep-your-sanity/img/flashlight.png) center center no-repeat;
  position:absolute;
  z-index:999;
  height:1046px;
  width:1920px;
  pointer-events:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-wrap">
      <div id="flashlight"></div>
    </div>

Answer 1

这里的技巧是设置偏移量的值。

.content-wrap {
  max-width:960px;
  width:100%;
  min-height: 592px;

和

'left': e.clientX-960,
'top': e.clientY-523

这些值不应该是硬编码的。

Answer 2

如果您的flashligt相对于文档根目录是绝对的，请使用e.pageX代替e.clientX（Y相同），如本答案中所述：onMouseMove get mouse position

Answer 3

想通了我需要获得div本身而不是屏幕的位置，所以在此处发布我的解决方案，以便将来出现问题：

$('.content-wrap').mousemove(function(e) {
  var x = e.pageX - this.offsetLeft;
  var y = e.pageY - this.offsetTop;
  $('#flashlight').css({
    'left': x-960,
    'top': y-523
  });
});

检查JsFiddle

在包含的div中创建手电筒效果

3 个答案: