javascript - 创建带闭包的 slider

Question

我正在尝试使用 goog.fx.dom.Slide 函数通过 Closure 实现内容 slider 。这个想法是能够在容器 div 的底部拖动一个滑动条，并随着用户移动 slider 使容器 div 相应地滑动。使用我当前的设置，我在控制台上没有收到任何错误，但容器 div 没有滑动到任何地方。

HTML:

<div id="sliderContainer"> 
<div id="slider">
    <div id="s-h">
        <div class="sliderBox"></div>
        ...
        <div class="sliderBox"></div>
    </div>
</div>

JS(通过点击 slider 触发，有效)。 A 和 B 是目标值(例如 100 和 0，因为我只需要水平滚动):

function slide(a, b) {
    // a and b are coordinates provided b
    var el = document.getElementById('s-h');
    var duration = 1000;
    var x = el.offsetLeft;
    var y = 0;
    var anim = new goog.fx.dom.Slide(el, [x, y], [a, b], duration,goog.fx.easing.easeOut);
    anim.play();}

任何建议，或任何明显错误的地方？

Answer 1

require('goog.ui.Slider');

//然后稍后

var slider = new goog.ui.Slider();
slider.render();

//但你还必须添加 css

.goog-slider-thumb {
  top: 0;
  width: 20px;
  height: 100%;
  position: absolute;
  /* background image */
}

.goog-slider-horizontal {
  width: 200px;
  height: 20px;
  /* color, etc... */
}