Question

我正在尝试使用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;
        }


}

}

以下是在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参数当然是固定数字，不会根据浏览器窗口大小进行缩放。

我试图对此进行研究，但最终，我既没有发现它无法完成，也没有发现，因为没有人能够解决我所遇到的具体问题。也许我没有正确地措辞。

谢谢！

Answer 1

从剧本的外观我会说它已经进行了必要的计算。尝试设置parent和stage选项，并省略偏移参数。即

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

编辑：我创建了一个小插图，对插件进行了一些修改，展示了如何使居中工作，http://jsfiddle.net/wwBJt/

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

1 个答案: