Question

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

HTML：

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

JS（通过单击滑块启动，可以工作）。 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... */
}

创建具有关闭的滑块

1 个答案: