javascript - 当窗口到达边界时使用变换停止 div 移动

Question

我使用 css transform 创建了一个查看器，我目前想知道的是，当 div 的边界碰到窗口边界时，我可以阻止它移动吗？还是我应该放弃 transform 方法？

这是代码 http://jsfiddle.net/pool4/W2vub/3/

var x=0, 
    y=0,
    rateX=0,
    rateY=0,
    maxspeed=10;
var container = $('.container');

var w = container.width() / 2;
var h = container.height() / 2;
var center = {
    x: container.offset().left + container.width() / 2,
    y: container.offset().top + container.height() / 2
};

container.on('mousemove', function(e){   
    var offsetX = e.pageX - center.x;
    var offsetY = e.pageY - center.y;

    rateX = -offsetX / w;
    rateY = -offsetY / h;
});

container.hover(
    function(){
        var scroller = $(this).data('scroller');
        if (!scroller) {
            scroller = setInterval( moveContent, 30 );
            $(this).data('scroller', scroller);
        }
    },
    function(){
        var scroller = $(this).data('scroller');
        if (scroller) {
            clearInterval( scroller );
            $(this).data('scroller', null);
        }
    }
);   

function moveContent(){
    x += maxspeed * rateX;
    y += maxspeed * rateY;
    var newpos = 'translate('+x+'px, '+y+'px)',
        transform = '-webkit-transform' || '-moz-transform' || '-ms-transform' ||  '-o-transform'  || 'transform',
        content = $('.content');
    content.css(transform ,newpos);
}

Answer 1

您可以尝试创建一些边界，并在超出边界时将转换设置为这些边界:

function moveContent(){
    x += maxspeed * rateX;
    y += maxspeed * rateY;

    // top and left boundaries
    x = x > 0 ? 0: x;
    y = y > 0 ? 0: y;

    // create my bottom and right boundaries
    var x_bound = -$('.content').width() + $(window).width();
    var y_bound = -$('.content').height()+ $(window).height();
    x = (x < x_bound) ? x_bound : x;
    y = (y < y_bound) ? y_bound : y;

    var newpos = 'translate('+x+'px, '+y+'px)',
    transform = '-webkit-transform' || '-moz-transform' || '-ms-transform' ||  '-o-transform'  || 'transform',
        content = $('.content');
    content.css(transform ,newpos);
}

这是更新的 FIDDLE

注意:在 fiddle 中我使用了 1500 而不是 $('.content').width() 因为它的宽度div 不代表组合框的宽度。