代码之家 › 专栏 › 技术社区 › sigug

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

pan jquery

sigug · 技术社区 · 13 年前

全屏背景以

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/background。

2 回复 | 直到 13 年前

Ejaz 13 年前

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

    $(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 }

Java脚本

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

sigug 13 年前

由于“中心-中心”显然与“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分辨率小)时仍然移动得太快,但除此之外,它还是有效的。