javascript - 使用旋转旋钮垂直和水平滚动

Question

我对此做了很多研究，但不幸的是，我什至不知道从哪里开始。我有两个使用插件（knobKnob.jquery.js）旋转 360 度的旋钮。

我的目标是，当我旋转相应的旋钮时，我可以水平和垂直滚动特定的 div。

该插件非常庞大，所以我无法在这里全部展示。我的目标是拥有 HTML5 和 CSS3 旋转旋钮，但我一直无法弄清楚这一点。任何为我指明正确方向的帮助将不胜感激。谢谢你。

Answer 1

我认为这是一个看起来很酷的插件，所以我决定试一试。这个页面有一切可以开始。不幸的是，我无法正确执行最后一点，因为 100% 转弯不会一直向右/向下滚动。（它与 KnobKnob 无关，更多与我无法掌握滚动和元素尺寸有关）

我放弃了，我会把它留给你和更聪明的读者来弄清楚:) 也许它与滚动条的厚度有关。

查看演示

$(function() {
    $('#control').knobKnob({
        snap: 10,
        value: 0,
        turn: function(ratio) {
            $("#ratio").val(ratio);
            $("#frame").scrollLeft(($("#frame")[0].scrollWidth - $("#frame").innerWidth()) * ratio);
        }
    });
    $('#control2').knobKnob({
        snap: 10,
        value: 0,
        turn: function(ratio) {
            $("#ratio2").val(ratio);
            $("#frame").scrollTop(($("#frame")[0].scrollHeight - $("#frame").innerHeight()) * ratio);
        }
    });
});​