javascript - 让一个元素跟随另一个元素

Question

不确定如何调用它，所以我想做的是找到一种方法让 div 跟随另一个 div。

我正在使用 this jquery slider ，使用它我想将 div(只是一个框)连接到 slider 的旋钮，以便它跟随 slider 的当前值。

我会举一个例子，但我链接的网站上有所有内容，而我的代码目前在其他地方。

现在我不确定在 jquery 中是否有类似 follow() 的东西，你可以在其中将一个元素指向你想要它跟随的地方并设置距离(我一直在寻找这样的东西) 所以这些是我想出的想法(我尝试过但失败了)来尝试解决这个问题。

• 在页面上找到 slider 旋钮的 CSS，并将其设置为 div(在 div 之后)，这样我就可以从 slider 中获取 left: 0;旋钮并将其放在下面的 div 上。 - 我以前不确定这是否可行，但找不到执行此操作的方法。

• 更改 slider 旋钮的图像以在上方包含一个框。但我不认为我能够赋予它值(value)。

再一次，我遇到了所有的事情，我是不是想多了？有没有更简单的方法来做到这一点。

在这方面的任何帮助都会很棒，即使只是为我指明正确的方向也会有所帮助，因为我刚刚在这方面遇到了困难。

如果你想先体验一下，我只是在这里设置了它的基本版本。

BASIC VERSION

简而言之:如何让 div 位于顶部(就在上方)并跟随 slider 旋钮？

div 看起来像这样:

div {
    width: 200px;
    height: 100px;
    border: 1px solid;
}

图像:这就是我想要的样子，div 将跟随旋钮。

Answer 1

检查这个 - 更新后跟随的 div 不会超出父级的宽度。

http://jsfiddle.net/8d9ek/8/

基本思路是...

1. 创建一个 div 以包含相对定位的“后续”标记。

2. 里面是 2 个定位的绝对元素。 (1 表示内容，1 表示下面的小箭头)

3. 拖动回调会更新以下两个元素的“left”属性，以反射(reflect)使用 slider 选择的百分比。
4. 后面的元素在其宽度的一半处留有负边距，以使其居中于所选点。

HTML:

<div id="follow-container">
    <div id="follow">I am following the knob below me</div>
    <div id="follow-container-inner">
        <div id="follow-arrow"></div>
    </div>
</div>
<div id="testslider"></div>
<div id="percentage"></div>

CSS:

#follow-container {
    padding: 0px 5px;
    overflow: hidden;
    position: relative;
}
#follow-container-inner {
    height: 55px;
    position: relative;
}

#follow {
    position: absolute;
    border: solid 1px #000;
    bottom: 10px;
    width: 150px;
    margin-left: -77px; /* half width */
    text-align: center;
}

#follow-arrow {
    display: inline-block;
    border: solid 10px transparent;
    border-top-color: #000;
    bottom: 0px;
    border-bottom-width: 0px;
    position: absolute;
    left: 50%;
    margin-left: -10px;
}

和 JS:

$('#testslider').sGlide({
    height: 10,
    image: 'knob.png',
    startAt: 70,
    colorStart: '#3a4d31',
    colorEnd: '#7bb560',
    buttons: true,
    drag: function(o){
        var pct = Math.round(o.value)+'%';
        $('#percentage').html(pct);

        // Position the follow div and arrow
        $('#follow, #follow-arrow').css('left', o.value+'%');

        // a little offsetting required to stop the elements going outside 100% width of the container
        var $follow = $('#follow');
        $follow.css('margin-left', -(Math.round(o.value)/100*$follow.outerWidth()));
    },
    onButton: function(o){
        var pct = Math.round(o.value)+'%';
        $('#percentage').html(pct);
    }
});