如何包含window.onresize以使div在容器内响应?

时间:2016-01-09 03:37:57

标签: javascript html css

我想使用window.onresize或类似的东西重新定义容器的宽度。目前,.bouncer对象不响应浏览器窗口大小。每次我在代码中放置window.onresize时,它都会完全停止'bouncer'的移动。

window.onresize = 
  function hitLR(el, bounding) {
    console.log($(el).data('vx'), $(el).data('vy'))
    if (el.offsetLeft <= 0 && $(el).data('vx') < 0) {
        console.log('LEFT');
        $(el).data('vx', -1 * $(el).data('vx'))
    }
    if ((el.offsetLeft + el.offsetWidth) >= bounding.offsetWidth) {
        console.log('RIGHT');
        $(el).data('vx',  -1 * $(el).data('vx'));
    }
    if (el.offsetTop <= 0 && $(el).data('vy') < 0) {
        console.log('TOP');
        $(el).data('vy', -1 * $(el).data('vy'));
    }
    if ((el.offsetTop + el.offsetHeight) >= bounding.offsetHeight) {
        console.log('BOTTOM');
        $(el).data('vy', -1 * $(el).data('vy'));
    }
}


function mover(el, bounding) {
    hitLR(el, bounding);
    el.style.left = el.offsetLeft + $(el).data('vx') + 'px';
    el.style.top = el.offsetTop + $(el).data('vy') + 'px';

}

setInterval(function() {
    $('.bouncer').each(function(){
        mover(this, $('.bouncyHouse')[0]);
    });
}, 50);



$(document).bind('beforeReveal.facebox', function() {
    var height = $(window).height() - 100;
    $('#facebox .content').css('height', height + 'px');
    $('#facebox').css('top', ($(window).scrollTop() + 10) + 'px');
});

0 个答案:

没有答案