如何用html5畫布和JQuery工具製作滾動條？

我試圖使Web溫度計這樣的（這是我的想法的圖） A drawing of my idea 如何用html5畫布和JQuery工具製作滾動條？

我能夠繪製HTML5畫布溫度計的身體，但它的所有靜態的 - 我不能與它互動。我需要兩個可編輯的文本框，更重要的是我需要一個類似於中心的滾動條控件，以便當用戶拖動它時，文本框中的數字將會更改。

這樣做最簡單的方法是什麼？

我知道JQuery Tools提供了ready-made range inputs，這與我所需要的非常相似，因爲這些範圍輸入都帶有文本框。但這是否正確？我嘗試了Jquery Tools範圍輸入，但未能將其與我的畫布合併。此外，我不知道是否可以在範圍輸入中添加額外的文本框。

2012-11-20 CherryQu

除了最後的紅色圓圈之外的所有東西都很容易在沒有畫布的情況下製作。我的意思是，只要與溫度計相互作用，如果你不能一直拖到圓圈（它總是會保持紅色），那麼你可以完全不用畫布來做到這一點。 – Joonas

你可以改變你所提到的插件的CSS並使其可見正是你在上面PIC ..

2012-11-20 07:03:36

你的意思是把滾動條放在中間，使它看起來像一樣的東西，但它實際上是一個透明的滾動條在畫布右上方？如果是這種情況，我擔心頁面可能會遭遇跨瀏覽器問題。會嗎？ – CherryQu

m不知道這個跨瀏覽器的問題......但該插件基本上是一個簡單的滾動條與CSS。你可以得到每個瀏覽器的CSS ... –

是的滾動條解決方案工作正常。我能夠調整它的css風格並將其對齊到中心。謝謝！ – CherryQu

的須藤代碼一點點

onmouseclick（目標= thermomoterGrippie） { this.grippie =活性 }

的OnMouseMove（事件） {

}

一旦你可以改變紅色的大小。那麼你可以根據紅色尺寸制定一個小算法來計算溫度

2012-11-20 07:28:49 Billybonks

回答