获取一个元素来关注另一个元素

不知道该怎么称呼它，所以我会想要做的是找到一种方法让div跟随另一个div。获取一个元素来关注另一个元素

我正在使用this jquery slider，使用这个我想连接一个div（只是一个盒子）到滑块的旋钮，因此它在上面用滑块的当前值。

我想给这样的一个例子，但我已经链接的网站有它都在那里，我的代码是在其他地方目前。

现在林不知道是否有像jQuery的follow()任何东西在那里你可以点一个元素，你想让它跟随并设置距离（我已经看过这样的事情）是什么使这些想法（即我试过并失败了）我想出了一个办法来解决这个问题。

查找滑块旋钮的CSS在网页上，并将其设置为div（以下DIV），所以我会抓住从滑块旋钮left: 0;并把这个以下div。 - 不知道这是可能的，但我找不到办法做到这一点。
更改为滑块旋钮图像以包括上述一个框。但我认为我不会把价值放在这个上面。

再次伴随着所有的事情我被困住了，我在想这个吗？有没有更简单的方法来做到这一点。

任何帮助，这将是巨大的，甚至只是指着我在正确的方向将是有益的，因为我刚才撞了南墙就这一个。

我刚刚建立了它的基本版本在这里如果你想有前它。

BASIC VERSION

简而言之：我怎样才能得到一个div坐ontop的（正上方），并按照滑钮的？

div看起来是这样的：

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

图片：这就是我想要的样子，和div将遵循旋钮。 enter image description here

来源

2014-01-10 Ruddy

什么问题???队友要么把问题在顶部或底部..有助于理解！ :) – NoobEditor

在最后添加了一个简短的问题。 – Ruddy

@NoobEditor看看这个问题，我添加了一张图片来清楚我在说什么。我希望你能帮助我。我怀疑任何人都可能被要求为此付出努力。：P – Ruddy

检查这一个 - 更新，因此后续的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); 
    } 
});

来源

2014-01-10 12:19:23

这很酷，但有一件事。上下移动时，'div'离开滑块旋钮。任何人都可以将它粘到滑块上吗？ – Ruddy

@Joel Cox：干得好！ –

是的 - 这是一个更新的jsfiddle来做到这一点：http://jsfiddle.net/8d9ek/8/ –

检查这个

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/

Redited与提示

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

jsfiddle.net/8d9ek/5

来源

2014-01-10 11:51:50

他希望滑块位于绿线之上......您刚刚布置了布局伴侣！ – NoobEditor

甚至没有一点关闭，NoobEditor也许我没有说清楚我想让我得到一个图像。 – Ruddy

然后就是这样你需要http://jsfiddle.net/8d9ek/2/ –

没有对元件运动的常规的回调，但可以在使用的setInterval（功能，时间）的间隔中的支票领带，检查该偏移（）。左或偏移（）。滑块的顶部，然后将该值复制到Div CSS。

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

来源

2014-01-10 11:57:21

您正在使用的库有一个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

来源

2014-01-10 12:18:23

获取一个元素来关注另一个元素

回答

相关问题