1

我即将在 javascript 中创作这个客户端小部件滑块。

当用户回答问题时，滑块会增加。

我可以让滑块背景变大和缩小，但我不太确定的是让“65%”指示器“粘”到蓝色 div 的末尾，并作为滑块背景自动移动增长和缩小。

由于这是 javascript，我很喜欢动态设置指标的绝对位置。好的，我还没有真正尝试过任何东西，因为我猜有很多方法可以实现这一点，所以想得到一些意见。我什至在考虑使用 qTip ......但是很高兴看到这与 css 作为一个浮动框锚定到另一个框

我正在想象改变两个并排 div 的宽度（完成与未完成），并让指示器相对于其容器绝对定位，以便它随着宽度的变化而移动。

可能的？

这就是我所说的：

在此处输入图像描述

工作示例（感谢菲利普的回答）

http://jsfiddle.net/HP7V9/

4

1 回答 1

2

我可能只是使用 jQuery 将其锚定在加载的 div 的右侧和它的高度的中间点。

所以假设我们有这个 DOM：

然后，假设您已经有调整栏大小的逻辑，这个 jQuery 就可以了：

$("#loaded").resize(function(){
    var loadedDiv = $("#loaded");
    var loadedPosition = loadedDiv.position();
    var percentXPos = loadedPosition.left + loadedDiv.width() - $("#percent").width()/2;
    var percentYPos = loadedPosition.top + loadedDiv.height() / 2 - loadedDiv.height() / 2;

    $("#percent").css({
        position: "absolute",
        top: percentYPos.toString() + "px",
        left: percentXPos.toString() + "px"
    });
});

另外，我认为没有任何理由为未加载的部分设置 div。你应该为整个栏创建一个 div 并给它一个黑色背景，然后给加载的 div 一个更高的 z-index 和不同的背景颜色。

请记住，它可能需要根据元素的边距、填充等进行细微调整。

于 2012-08-02T19:30:53.997 回答