2

このページの 3 番目のデモに似た CSS3 変換アニメーションを使用して、ラジアル メニューを実装したいと考えています。キャンバスRadmenuを使用した jQuery の実装がありますが、フラッシュのものほど流動的ではありません。

最初の質問は次のとおりです。これは実行可能ですか? 可能であれば、2D 変換とアニメーションのみを使用して、より多くのプラットフォームで機能するようにします。

2 番目の質問: どこで行うのですか? シンプルな CSS3 の例では、シンプルなオブジェクトを移動、せん断、スケーリング、および回転する方法を示しています。しかし、フラッシュのようなメニューを実装する方法に関する情報をどこから探し始めればよいかわかりません。

4

3 に答える 3

1

rsilvaのコメントに返信しただけですが、残念ながら担当者が足りないので、お詫びします。

http://wewillbeok.com/radialから自由に借りたり盗んだりしてください。ただし、これは間違いなく最もクリーンなコードではなく、少しも文書化されていないことに注意してください。そして、Yi Jiangは、私が使用しているアニメーションが古いブラウザーではうまく機能しないことは非常に正しいです。「ズーム」アニメーションを削除すると、パフォーマンスが大幅に向上します。

別の十分に文書化されたパフォーマンスの高い実装は、 http ：//www.webtoolkit.info/javascript-pie-menu.htmlから入手できますが、「派手」ではないかもしれません。

ですから、あなたの質問にもっと直接的に答えるには、純粋にCSS3アニメーションを使用してそのようなメニューを作成するのは難しいと思いますが、それがあなたが探しているものであれば、JSとCSS3の組み合わせで絶対に実現可能です。理想的な実装は、これまでに説明したすべての例の間のどこかにある可能性があります。

于 2010-08-31T15:18:50.493 に答える
1

ここを見てください

これにより、選択がパイメニューに変わり、css を介してスタイル設定できますが、上記ほど派手ではありません。

利用方法：$("#your-selectbox-id").pieselmenu($(this));

于 2011-10-04T14:33:03.817 に答える
0

ほとんどの場合、アイテムの分布を計算する必要があるため、Javascript レイヤーが必要です。CSS3 を利用して、変換を実行することにより、要素のスケーリングと回転を支援できます。Chrome、Safari、IE9+、FireFox 3.5+、Opera 11+ で動作します。

しばらく前に、jQuery Radmenu (ラジアル メニュー) プラグインというプラグインを作成しました。私はその使用の良いデモに取り組んでいます (私はデザイナーではないので、時間がかかります) が、プラグインのパワーを理解するには、http://www.tikku.com をチェックしてください。いくつかの例については、 /jquery-radmenu-plugin#radmenu_tutorial_4を参照してください。

API 仕様があり、ダウンロードできます。学習したい場合は、GitHub から気軽にフォークしてください。https://github.com/nirvanatikku/jQuery-Radmenu-Plugin

ご不明な点がございましたら、お気軽にお問い合わせください

于 2011-05-15T07:25:01.710 に答える