当窗口碰到边框时，使用变换停止 div答案

【问题标题】：Stop a div using transform from moving when the window hit the border当窗口碰到边框时，使用变换停止 div
【发布时间】：2014-03-05 16:35:50
【问题描述】：

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

这里是代码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);
}

【问题讨论】：

标签： javascript jquery css border transform

【解决方案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

注意：在小提琴中，我使用了1500 而不是$('.content').width()，因为该 div 的宽度并不代表组合框的宽度。

【讨论】：