什么变量决定了环形交换插件中非聚焦元素的位置?

时间:2012-03-26 23:24:35

标签: jquery positioning

我正在使用环形插件来循环播放3个div。每个div的宽度为794px,这使得对焦环形元件794和两个不对焦315.218px宽,定位所以每个半部分被对焦的div隐藏。这一切都很好,但显示器的总宽度需要保持在1000px(理想情况下为980px,但如果需要,我可以捏造。)

基本上我想让非焦点div被3/4隐藏在焦点div中,但是对于我的生活来说无法弄清楚我需要编辑哪些变量才能做到这一点。不幸的是,它不是z-index和minScale等众多易于更改的选项之一。我试过minScale,但很明显这不会起作用。

插件输出此代码:

<li class="roundabout-moveable-item" style="position: absolute; left: -57px; top: 205px; width: 319.982px; height: 149.513px; opacity: 0.7; z-index: 146; font-size: 5.6px;">

我需要找出左侧定位的变化,以便它更接近舞台的中心,如下所示:

<li class="roundabout-moveable-item" style="position: absolute; left: 5px; top: 205px; width: 319.982px; height: 149.513px; opacity: 0.7; z-index: 146; font-size: 5.6px;">

我尝试使用插件的定位功能,但所做的一切都是向左或向右移动所有内容。

非常感谢任何帮助。一旦我找到所有这些jquery的东西,这个网站将会很棒!

这是我的.js文件的链接:http://avalon.eaw.com/scripts/jquery.roundabout2.js我有一个溢出:隐藏在帮助指导那些无焦点项目的定位。

3 个答案:

答案 0 :(得分:1)

我自己也有同样的问题,并调整了上面提出的选项,但没有任何乐趣。我将这些选项重置为默认值并调整了以下选项,并且我能够使其适合我的980px容器:

info.midStage = {
    width: info.stage.width / 2.69,
    //original value was 2.0 - changed to resize the item and move it closer to the middle
    height: info.stage.height / 2
    };

    info.nudge = {
    width: info.midStage.width + (info.stage.width * 0.18),
    //original value was 0.05 - changed to resize the item and move it closer to the middle
    height: info.midStage.height + (info.stage.height * 0.05)
    };

希望这有助于您或其他任何人解决此问题

答案 1 :(得分:1)

调整环形交叉口ul的宽度/高度设置应该可以完成这项任务。

答案 2 :(得分:0)

我仍然认为我没有找到理想的解决方案,但是在没有任何指导的情况下,我就开始劈开脚本,在这里和那里改变数字,看看发生了什么。通过修改数学,我能够使侧翼元素更接近中心,如下所示:

(function($) {
    "use strict";

    var defaults, internalData, methods;

    // add default shape
    $.extend({
        roundaboutShapes: {
            def: "lazySusan",
            lazySusan: function (r, a, t) {
                return {
                    x: Math.sin(r + a), 
                    y: (Math.sin(r + 3*Math.PI/2 + a) / 8) * t, 
                    z: (Math.cos(r + a) + 1) / 2,
                    scale: (Math.sin(r + Math.PI/2 + a) / 1.5) + 0.5 // default setting a) / 2.0) changed to bring out of focus elements closer to the middle
                };
            }
        }
    });

并调整倾斜度(根本没有响应预定义的var)我修改了定义的css为'top'

// update item
child
    .css({
        left: ((factors.x * info.midStage.width + info.nudge.width) - factors.width / 2.0).toFixed(0) + "px",
        top: ((factors.y * info.midStage.height + info.nudge.height) - factors.height / 1.3).toFixed(0) + "px",
        // default setting is factors.height / 2.0. changed to adjust height ratio of in focus and out of focus items
        width: factors.width + "px",
        height: factors.height + "px",
        opacity: (info.opacity.min + (info.opacity.diff * factors.scale)).toFixed(2),
        zIndex: Math.round(info.zValues.min + (info.zValues.diff * factors.z)),
        fontSize: (factors.adjustedScale * data.startFontSize).toFixed(1) + "px"
    });
    data.currentScale = factors.adjustedScale;

我希望这有助于某人。我知道必须有更好的方法来做到这一点,所以如果有人找到答案,请发布它!