mousemove 视差仅轻微移动而不是鼠标位置答案

【问题标题】：mousemove parallax only move slightly instead of mouse positionmousemove 视差仅轻微移动而不是鼠标位置
【发布时间】：2015-11-27 04:06:45
【问题描述】：

当鼠标碰到英雄面板区域时，我希望飞机和火箭只从原来的位置移动大约 5%。

此当前代码使图像跟随并偏移鼠标位置。

请帮忙。

$(document).ready(function () {
    $('#hero-panel').mousemove(function (e) {
        parallax(e, document.getElementById('plane'), 1);
        parallax(e, document.getElementById('rocket'), 2);
    });
});

function parallax(e, target, layer) {
    var layer_coeff = 10 / layer;
    var x = ($(window).width() - target.offsetWidth) / 4 - (e.pageX - ($(window).width() / 4)) / layer_coeff;
    var y = ($(window).height() - target.offsetHeight) / 4 - (e.pageY - ($(window).height() / 4)) / layer_coeff;
    $(target).offset({ top: y ,left : x });
};

https://jsfiddle.net/jc0807/c5yke2on/

谢谢

【问题讨论】：

什么飞机？什么火箭？什么英雄面板区域？ 5% 什么？这个问题是个灾难，请改写。
@PeteB 非常抱歉我提供了错误的小提琴链接。感谢您的检查
啊，新的小提琴更有意义 :) 仍然不清楚 5% 的基础是什么……也许是面板的整个高度？
您是说希望它们只移动一次而不是在鼠标悬停在面板上时不断移动？
@PeteB 我基本上希望它们在鼠标位于整个英雄图像容器中时从其起始位置稍微悬停/移动。类似于视差鼠标跟随效果。

标签： javascript jquery css offset mousemove

【解决方案1】：

好的，我想我明白您在寻找什么： fiddle

$(document).ready(function () {
    var plane = document.getElementById('plane');
    var rocket = document.getElementById('rocket');
    plane.homePos = { x: plane.offsetLeft, y: plane.offsetTop };
    rocket.homePos = { x: rocket.offsetLeft, y: rocket.offsetTop };

    $('#hero-panel').mousemove(function (e) {
        parallax(e, document.getElementById('plane'), 10);
        parallax(e, document.getElementById('rocket'), 20);
    });
});

function parallax(e, target, layer) {
    var x = target.homePos.x - (e.pageX - target.homePos.x) / layer;
    var y = target.homePos.y - (e.pageY - target.homePos.y) / layer;
    $(target).offset({ top: y ,left : x });
};

我们在这里所做的是将飞机和火箭的起始位置记录为飞机和火箭物体上的新属性“homePos”。这使得根据鼠标与对象 homePos 的距离，可以轻松地将视差效果作为与原始位置的偏移。如果修改传递给视差的图层值，则移动量会发生变化（我们将鼠标从对象起始位置的中间偏移除以它，以计算新的对象偏移量）。

【讨论】：

【解决方案2】：

我想我的问题与上面的问题有点相关，我不想创建重复。

我正在使用下面的代码“导航”到 mousemove 上的图像。问题是我无法使图像填满所有可视屏幕区域。我在容器中添加了一个红色背景以显示我的意思。期望的结果是看不到红色背景。

HTML

<div class="m-scene" id="main">
  <div class="scene_element">
    <img class="body" src="http://www.planwallpaper.com/static/images/nature-background-images2.jpg" />
  </div>
</div>

$(document).ready(function() {
  $('img.body').mousemove(function(e) {
    parallax(e, this, 1);
  });
});

function parallax(e, target, layer) {
  var layer_coeff = 20 / layer;
  var x = ($(window).width() - target.offsetWidth) / 2 - (e.pageX - ($(window).width() / 2)) / layer_coeff;
  var y = ($(window).height() - target.offsetHeight) / 2 - (e.pageY - ($(window).height() / 2)) / layer_coeff;
  $(target).offset({
    top: y,
    left: x
  });
};

CSS

.m-scene {
  background-color: red;
  overflow: hidden;
  width: 100%;
}

.scene_element {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.scene_element img {
   width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

我的 jsFiddle 是：fiddle

谢谢！

【讨论】：