2012-03-27 141 views
1

我正在尋找一些jquery插件或多個紡車輪或360度旋轉車輪的任何代碼示例。附加的是演示圖像,我正在尋找解決方案,其中所有的輪子都可以旋轉,這基本上可以像桌面和移動應用程序一樣開發出生日的選擇......但我需要爲我的web應用程序。我使用的是PHP & Apache Web服務器。紡車輪或360度旋轉輪

enter image description here

預先感謝任何想法或sameple代碼或similer解決前進

-Himanshu

回答

2

我不知道任何現成的解決方案,但是我可以指出你在兩個方向上,你可以去:

+0

嗨大衛,謝謝你的提示作出迴應。 我有lreadt檢查第二個鏈接,但它有一些跨瀏覽器的問題,特別是對於IE,它現在在IE中工作....讓我試着分析第一個鏈接 – 2012-03-27 11:33:44

+1

這兩個* *不會*在IE9之前工作,如果你想讓IE8兼容,你將不得不旋轉圖像服務器端或進入ms特定的欺騙。如果您想採用「乾淨」的方法,您可以在這裏看到可用性表格http://caniuse.com/#search=transformat(第一種方法)和http://caniuse.com/#search=canvas(第二種方法)。最後,如果你想用ms欺騙http://code.google.com/p/jqueryrotate/wiki/Examples爲你處理這個好看,但我沒有使用過這個插件。 – 2012-03-27 13:41:13

+0

humm。讓我試試一次......我想要支持IE7及更高版本,Crome和FF ......所以尋找瀏覽器友好的解決方案,至少我已經介入了。 – 2012-03-29 08:13:48

0

我不知道一個jQuery插件完全符合你的要求。在瀏覽器兼容性方面,我建議你看看優秀的RaphaelJS JavaScript庫。它允許您使用矢量圖形繪製和旋轉輪子。最重要的是,這個庫是IE6 +兼容的,並且適用於大多數現代網頁瀏覽器,包括平板電腦和手機。

爲了緩解必要的矢量圖形的創作,你可以畫出你的選擇(例如插圖,Inkscape中,等..)的矢量圖像編輯器,車輪和保存矢量圖像SVG文件。一個非常方便的在線伴侶工具ReadySetRaphael將SVG文件作爲輸入,並生成必要的JavaScript以自動繪製圖形。

如果您將矢量圖形的路徑作爲JavaScript中的對象,可以使用Element.rotate()方法輕鬆旋轉它。

0

雖然我不知道,如果一個插件存在此目的;在我目前的項目中,我們使用Canvas API這是不是從你的要求是不同的做了一個上下文菜單,如果不是有點複雜。因此,如果您不受限制,我強烈建議使用HTML5 Canvas api來執行此操作。您可以使用交互式花卉教程中的一些想法。

http://www.html5canvastutorials.com/labs/html5-canvas-interactive-flower/

這應該可以幫助太多,如果你有意與jQuery的發揮。 http://www.elated.com/res/File/articles/development/javascript/snazzy-animated-pie-chart-html5-jquery/

2

是HTML5畫布旋轉()是去與此的方式。我的網站http://www.dougtesting.net有一個使用畫布旋轉的獲獎輪子,但僅限於一個輪子圖像。該代碼已完全註釋,因此您可能會發現它是一個有用的起點。

對於您的項目,您可能需要將多個圖像渲染到畫布並旋轉到所需的角度。此外,您可能需要查看mouseDown,mouseMove和mouseUp代碼以允許用戶將輪子拖動到所需的位置,並且代碼可以告訴您指向的值(某些代碼位於我的制勝輪也可以)。