Question

全屏背景以

为中心

background: url(image) no-repeat center center;

现在我希望每当用户移动鼠标时背景图像会稍微移动。我有几种方法/插件可以做到这一点，但不是我想要的，所以我选择这样做（我也在某处找到）：

$("body").bind('mousemove', function(e){
    var ypos=(e.pageY-100)/12 + 10;
    var xpos=(e.pageX-100)/18 + 10;
    $(this).css({backgroundPosition: xpos * (-1) + 'px ' + ypos * (-1) + 'px' });
});

不同的值（/ 12，+ 10）只是我任意选择的值，因为它们给了我正在寻找的结果 - 不确定它是否是正确的方法。无论如何，现在的问题是，当页面从头开始加载时（不移动鼠标）一切看起来都很好（图像居中）。

如果上面发布的脚本已启用并且您移动鼠标，则背景图像会“跳转”到某处（根据位置值），因此它会从图像的最左上方显示它不应该显示。

不幸的是我不能自己编码（只是编辑一些基本的东西）并且总是在数学上很糟糕。这显然是“只是”一个数学问题，但任何人都可以帮我弄清楚我必须改变什么，所以背景图像基本上总是居中，但在所有方向上只移动了50px（或其他）？

基本上类似于此http://manos.malihu.gr/tuts/jquery_image_panning_liquid.html，但不是实际图片，只是css / background。

Answer 1

在答案部分发布我已快速编写的代码，以保持可读性。此可能间接解决您的问题。

    $(function(){
        var mousex = mousey = null;
        $('body').mousemove(function(ev){
           if(mousex === null || mousey === null){
              //get initial x/y position for mouse cursor
              mousex = ev.pageX;
              mousey = ev.pageY;
           }

           window.clearTimeout(window.mouse_timeout);

           window.mouse_timeout = window.setTimeout(function(){
              console.log('mouse moved', ev.pageX - mousex, ev.pageY - mousey);

              /* now that you've the absolute position of the mouse and delta x/y here, you can move your background accordingly */

              //update the variables to the latest picket position of the mouse
              mousex = ev.pageX;
              mousey = ev.pageY;
           }, 10)
        });
     });

更新

jsfiddle此代码将初始鼠标位置标记为 center 参考点，并在稍后参考该点计算鼠标移动。

标记

<div id="outer_container">
    <div id="imagePan">
        <div class="container">
            <div id="mov">
                <img src="http://i.imgur.com/92Z5zCM.jpg" class="panning" />
            </div>
        </div>
    </div>
</div>

CSS

html, body{ height: 100%; }
body{ margin: 0; padding: 0; background: #eee; }
#outer_container{ position: relative; margin: auto; padding: 4px; border: 8px solid #dadada; height: 90%; width: 80%; background: #CDD7E0}
#imagePan{ position: relative; overflow: hidden; cursor: crosshair; height: 100%; width: 100%; }
#imagePan .container{ position: relative; left: 0; }
#mov{ margin: -51px -391px 0 }

的Javascript

     var originX = originY = xUnit = yUnit = dX = dY = mov = null;
     $(window).load(function () {
        mov = $('#mov');
        initMarginL = parseInt(mov.css('margin-left'));
        initMarginT = parseInt(mov.css('margin-top'));

        $('#outer_container').mousemove(function (ev) {
           if (originX === null || originY === null) {
              originX = ev.pageX;
              originY = ev.pageY;

              xUnit = parseFloat((Math.max(originX, $(window).width()) / $(window).width()).toFixed(2));
              yUnit = parseFloat((Math.max(originY, $(window).height()) / $(window).height()).toFixed(2));
           }

           var dX = originX - ev.pageX;
           var dY = originY - ev.pageY;

           mov.css({
              marginLeft: initMarginL + (dX * xUnit),
              marginTop: initMarginT + (dY * yUnit)
           });
        });
     });

Answer 2

由于“中心”显然与“50％50％”相同，我想我刚刚找到了答案！：）

$('body').mousemove(function(e){
  var mousePosX = 50 + (e.pageX/$(window).width())*10;
  var mousePosY = 50 + (e.pageY/$(window).height())*5;
  $(this).css('backgroundPosition', mousePosX + '% ' +  mousePosY + '%');
});

使用较小的分辨率（超过1920）仍然移动太快但除此之外它可以工作。

使用jquery平移全屏图像，同时保持居中

2 个答案:

更新

标记

CSS

的Javascript