Question

不知道该怎么称呼这样做，我想做的就是找到一种让div跟随另一个div的方法。

我正在使用this jquery slider，使用此功能我希望将div（只是一个框）连接到滑块的旋钮，使其跟在上面，并显示滑块的当前值。

我会给出一个这样的例子，但是我链接的网站在那里有所有，我的代码目前在其他地方。

现在我不确定jquery中是否有类似follow()的内容，您可以将元素指向您希望它遵循的内容并设置距离（我已经找到了类似的东西）所以这些是想法（我尝试过但失败了）我想出来试图解决这个问题。

在页面上找到滑块旋钮的CSS并将其设置为div（在div之后），这样我就可以从滑块旋钮中抓取left: 0;并将其放在{{1 }}。 - 不确定我以前是否可以这样做但是找不到办法做到这一点。
更改滑块旋钮的图像以包含上方的框。但我认为我不能把这个价值放在这个上。

对于我遇到的所有事情，我是否过度思考？有没有更简单的方法来做到这一点。

任何有关这方面的帮助都会很棒，即使只是指着我正确的方向也会有所帮助，因为我刚刚在这个方向打了一堵砖墙。

如果您想在此处使用它，我只需在此设置它的基本版本。

BASIC VERSION

简而言之：如何让div坐在上面（上方）并按下滑块？

div看起来像：

div

图片：这就是我想要的样子，div { width: 200px; height: 100px; border: 1px solid; }将跟随旋钮。 enter image description here

Answer 1

检查一下 - 更新，以便跟随div不会超出父级的宽度。

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

基本理念是......

创建一个div以包含相对定位的“跟随”标记。
里面是2个绝对元素。（1表示内容，1表示下面的小箭头）
拖动回调会更新以下两个元素的“left”属性，以反映使用滑块选择的百分比。
以下元素的宽度为半宽，以使它们在所选点上居中。

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);
    }
});

Answer 2

你正在使用的库有drag回调，你可以传递一个函数，只要滑块移动就会调用它。

function callback(o) {
    var pos = o.el.find('.slider_knob').offset() // Grab the knob's page location
    $('#div').css({'left': pos.left, 'top': pos.top + 10}) // Shove the div right under it
}
$('#slider').sGlide({
    // Stuff
    drag: callback
});

Demo

Answer 3

检查这个

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

<div  style="text-align:center">
 <div id="test" style="display:inline-block; width:70%; vertical-align:middle;">
   <div id="testslider" class="slider_bar">
    </div>
   </div>
  <div class="pct"></div>

新演示http://jsfiddle.net/8d9ek/2/

使用工具提示重新加载

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

jsfiddle.net/8d9ek/5

Answer 4

元素移动没有常规回调，但是您可以使用setInterval（函数，时间）以间隔检查偏移量（）。左侧或偏移量（）。滑块顶部，然后是一个间隔。将值复制到Div CSS。

当我不在手机上时，将使用示例进行编辑。

获取元素以跟随另一个元素

4 个答案: