Как динамически масштабировать элементы в определенном Javascript, который использует только пиксели? - PullRequest
Новая
       29

Как динамически масштабировать элементы в определенном Javascript, который использует только пиксели?

0 голосов
/ 20 марта 2012

Я пытаюсь использовать плагин jQuery: плавающие прямоугольники с замедлением и размытием движения в jQuery. Автор: Marcell 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;
        }


}

}

Вот скрипт, который инициирует JavaScript в документе HTML: 

<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 - это, конечно, фиксированные числа, которые не масштабируются в зависимости от размера окна браузера.

Я пытался исследовать это, но, в конечном счете, я не нахожу, что это не может быть сделано, или что это может, потому что, похоже, ни один ответ не касается конкретной проблемы, с которой я сталкиваюсь. Возможно, я не правильно формулирую это.

Спасибо!

1 Ответ

0 голосов
/ 20 марта 2012

По внешнему виду скрипта я бы сказал, что он уже учитывает необходимые расчеты. Попробуйте установить параметры parent и stage и пропустите параметры смещения. * 1003 то есть * 

$('#biglogo').floatingBox({ 
    parent: 'container-id',
    stage: 'container-id',
    scale: 0.09,
    blur: false,
    isText: false
});

Редактировать: Я создал скрипку с некоторыми модификациями для плагина, который показывает, как заставить работать центрирование, http://jsfiddle.net/wwBJt/

...