如何在只使用像素的特定Javascript中动态缩放元素

我正在尝试使用jQuery插件：在jQuery By中使用带有缓和和运动模糊的浮动框：Marcel Jusztin。

我已经很好地工作了，并且了解如何调整大多数属性，但我是一个Javascript新手，真的不了解改变它如何使用数学来放置我想要动画化的元素所涉及的机制。我想做的是将x和y偏移坐标集（当然是以像素为单位）更改为一组百分比，这样元素就可以根据屏幕分辨率动态缩放位置。以下是完整的脚本：

jQuery.fn.floatingBox = function ( userOptions ) {
options = jQuery.extend ({
    parent    : 'backdrop',
    stage     : 'backdrop',
    scale     : 0.3,
    xOffset   : 0,
    yOffset   : 0,
    blur      : false,
    isText    : false,
    blurColor : '#888',
    frameRate : 40,
}, userOptions);

var parent = options.parent;
var stage = options.stage;
var scale = options.scale;
var xOffset = options.xOffset;
var yOffset = options.yOffset;
var blur = options.blur;
var isText = options.isText;
var blurColor = options.blurColor;
var frameRate = options.frameRate;
var midX = $('#' + stage).width() / 2;
var midY = $('#' + stage).height() / 2;
var _x = midX;
var _y = midY;
var xx = midX;
var yy = midY;
var objectId = $(this).attr('id');
$('#' + objectId).css('position','absolute');
shadowAmount = 0;
window["timer" + objectId] = window.setInterval(update,frameRate);

$('#' + parent).mousemove(function(event){
    _x = event.pageX; 
    _y = event.pageY;
    if( shadowAmount < 5 && blur == true ) shadowAmount += scale;
});
factor = scale * 0.5;   
function update() {
        xx += (((_x - midX) * -scale) - xx) * factor;
        yy += (((_y - midY) * -scale) - yy) * factor;
        $('#' + objectId).css('left', xx + xOffset + $('#' + parent).position().left);
        $('#' + objectId).css('top', yy + yOffset + $('#' + parent).position().top);
        if(blur){
            if(!isText){
                $('#' + objectId).css('box-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
                $('#' + objectId).css('-moz-box-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
                $('#' + objectId).css('-webkit-box-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
                $('#' + objectId).css('-o-box-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
            }else{
                $('#' + objectId).css('text-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
            }
            if(shadowAmount > 0 ) shadowAmount -= scale;
        }

}

}

以下是在HTML文档中启动javascript的脚本：

<script type="text/javascript">
jQuery(function(){
        $('#biglogo').floatingBox({ 
            scale : 0.09,
            blur : false,
            isText : false,
            xOffset : 400,
            yOffset: 200,
        });
            $('#biglogo2').floatingBox({    
            scale : 0.08,
            blur : false,
            isText : false,
            xOffset : 405,
            yOffset: 205,
        });
    });
</script>

我有两个透明的png文件，它们以5个像素（或者可能被认为是10个像素）的微小偏移相互层叠，但我更希望这两个图像在所有浏览器窗口中居中，而不仅仅是我的。刻度表示元素移动的速度和距离。xOffset和yOffset参数当然是固定数字，不会根据浏览器窗口大小进行缩放。

我曾试图对此进行研究，但最终，我既没有发现这是不可能的，也没有发现这可以，因为似乎没有人回应我所面临的具体问题。也许我用词不对。

谢谢！