3

全屏背景以

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）只是我任意选择的值，因为它们给了我想要的结果——不确定这是否是正确的方法。无论如何，现在的问题是，当页面从头开始加载（不移动鼠标）时，一切看起来都很好（图像居中）。

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

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

基本上是这样的http://manos.malihu.gr/tuts/jquery_image_panning_liquid.html，但没有实际的图像，但只有 css / 背景。

4

2 回答 2

2

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

    $(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)
           });
        });
     });
于 2013-04-16T22:12:18.960 回答
1

由于“中心中心”显然与“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 年）仍然移动得太快，但除此之外它仍然有效。

于 2013-04-17T09:07:23.323 回答