Question

我已就此进行了大量研究，但遗憾的是甚至不知道从哪里开始。我有两个旋钮，使用插件旋转360度（knobKnob.jquery.js）。

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

这个插件很笨重，所以我不能在这里真正展示它。我的目标是使用HTML5和CSS3旋转旋钮，但我无法弄清楚这一点。任何帮助我指向正确方向的人都会非常感激。谢谢。

Answer 1

我认为这是一个很酷的插件，所以我决定给它一个旋转。 This page has everything to get started。不幸的是，我不能让实现的最后一点正确，因为100％转弯不会一直向右/向下滚动。（它与KnobKnob无关，更多与我无法掌握滚动和元素尺寸有关）

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

See the demo

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

使用旋钮垂直和水平滚动

1 个答案: