Sie vor JavaScript Schieber gesehen haben:jQuery: Erstellen eines Kreis Slider
http://dev.jquery.com/view/tags/ui/1.5b2/demos/ui.slider.html
Was ich bin Absehen ist ein kreisförmiger Schieber. Es würde aus einem ziehbaren Knopf an einem Punkt auf dem Kreis bestehen - und dieser Knopf kann irgendwo entlang des Rings gezogen werden. Der Wert hängt davon ab, an welcher Position sich der Button befindet (denken Sie an eine Uhr).
einen Mittelpunkt c aktuellen Mauspunkt bei m definieren
in der Maus per Drag Event-Handler, dann würden Sie
var dx = m.x-c.x;
var dy = m.y-c.y;
var scale = radius/Math.sqrt(dx*dx+dy*dy);
slider.x = dx*scale + c.x;
slider.y = dy*scale + c.y;
Radius einig voreingestellten Wert des Sliders wäre haben,
Wie wäre es damit: http://www.thewebmasterservice.com/dev-blog/curved-rounded-or-circular-sliders-javascript-jquery-ui
Einige Erklärungen und eine Demo.
Wie wäre es mit diesem Plugin http://controlwheel.com/. es ist einfach zu bedienen und hat einige Beispiele
Ich habe eine jQuery plugin geschrieben, die Voll-/Halbkreisschieberegler unterstützt.
Überprüfen Sie die jQuery roundSlider Plugin von hier http://roundsliderui.com/. Genau das wollen Sie.
Dieser Roundslider mit ähnlichen Optionen wie der jQuery Ui Slider. Es unterstützt Standard-Schieberegler, Min-Range und Range-Schieberegler. Nicht nur den runden Schieber unterstützt es auch verschiedene viertel, halbe und pie Kreisformen.
Für weitere Details überprüfen Sie die demos und documentation Seite.
Bitte überprüfen Sie die Demo von jsFiddle.
Verwandte Antworten:https://stackoverflow.com/a/31367164/1845801 und https://stackoverflow.com/a/31369265/1845801
Screenshots:
wie würden Sie diese implementieren ich für die gleiche Sache suchen und fand diesen Thread, aber ich habe keine Ahnung, wie Ich würde diesen Code implementieren – mcgrailm
gleiche Frage Mathe ist viel einfach, aber wie würden Sie das Frontend implementieren? Wie strukturierst du das mit divs und so? – ina
verwenden Sie css oben, links auf dem Element: Beispiel unter http://pastebin.com/kTAfEwTC – Jimmy