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

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/背景。

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此代码将初始鼠标位置标记为中心引用点，并稍后引用该点计算鼠标移动。

标记

<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)
           });
        });
     });