4

HTML では、次のようなことをしたいと思います。

<div class="thermometer">
  <div class="circle purple">
    <div class="pie-piece percent=75%">
    </div>
  </div>
</div>

結果は、75% 塗りつぶされた紫色の円になります。(ピザが 4 ピースにカットされ、1 ピースが欠けているのと同じこと) (75 はデータベースから取得され、CSS に含まれていてはなりません)

サークルの私の CSS は次のとおりです。

.thermometer .circle {
    position: absolute;
    width:26px;
    height:26px;
    -moz-border-radius:13px;
    -webkit-border-radius:13px;
    border-radius:13px;
    border: 1px solid #000000;
}
.thermometer .green { background-color: green; }
(other colors)

「hold」と「clip」プロパティを使用した例を見ましたが、変数でそれを行う方法がわかりませんでした。「パイピース」のCSSを書くにはどうすればよいですか?

4

2 に答える 2

2

真剣に受け止めたので、少し遅れて答えます。

まず、おそらくこのようなことは、キャンバス描画を使用してより適切に実行できる可能性があります (確認する必要があります) が、楽しみのために、LESS+HTML+CSS3 とビット JavaScript をクレイジーに組み合わせて作成しました。

ここに実例があります https://c9.io/dmi3y/css3pie/workspace/index.html 最新のすべてのブラウザーと IE9 + で動作するはずです。おそらく、9 より前の IE バージョンにサポートを追加できます。これには、ボーダーのサポートが必要です半径と変換。後者はマトリックスフィルターで行うことができます.htcファイルhttp://samuli.hakoniemi.net/cross-browser-rotation-transformation-with-css/で読むべきものと実用的なソリューションがありますが、私はテストしていませんそれと個人的には、古いブラウザーはあまり気にしません。何かブラウザのアップグレードを見たいかどうかについての通知を追加します。また、FireFox にはいくつかのアーティファクトがあります。おそらく、疑似クラス::beforeを使用しており::after、実際の要素を使用している可能性があるため、これが改善されます。

技術情報。ここに 9cloud コードhttps://c9.io/dmi3y/css3pieがあります。中心的なアイデアは、クライアント側の LESS を使用して動的に生成された CSS を使用することです。したがって、利便性のために採用されたビットjQueryコードを使用すると、他のライブラリ/コアjsに簡単に変換できます。

マイルストーン：

マークアップで、度数で塗りつぶされる領域の数を定義します

<div class="circle" id="pieOne" data-fill="30deg"></div>

そして基本的にそれを機能させるために必要なものはこれだけです。

これは何が起こっているのかを簡単に説明したものです:

この値を使用して、埋め込みスタイルの LESS 変数をオーバーライドし、CSS を作成しますless.refreshStyles()

<style type="text/less" id="lessPie">
    @import 'styles/pie';
    @fillDegree: #dataDegree#; // from 0deg to 180deg
    @baseRotate: 40deg;
</style>
<script type="text/javascript">
    !function(){
        var lessPieText = $('#lessPie').text();
        $(function(){
            var pieOneDataFill = $('#pieOne').attr('data-fill');
            while (parseInt(pieOneDataFill) > 180) {
                pieOneDataFill = (parseInt(pieOneDataFill) - 180) + 'deg';
            }
            while (parseInt(pieOneDataFill) < 0) {
                pieOneDataFill = (parseInt(pieOneDataFill) + 180) + 'deg';
            }
            $('#lessPie').text(lessPieText.replace('#dataDegree#', pieOneDataFill));
            less.refreshStyles();

            // update % value
            // 180deg         = 100%
            // pieOneDataFill = x%

            var percentValue = (parseInt(pieOneDataFill) * 100) / 180;
            $('#pieOneLegend').find('span').text(Math.floor(percentValue) + '%').end().show();

        });
    }()
</script>

追加のボーナスとして、@baseRotate: 40deg;価値のあるパイを回転させることができます。% 値の凡例も表示されます。

それはほとんどすべてです。しばらくの間、1 つの値を持つページごとに 1 つのパイ (または 1 つのタイプのパイ) のみをサポートします。私は後でこれを github にプッシュし、おそらく興味深いプロジェクトに取り組みます。

于 2013-01-08T05:31:31.953 に答える
2

このチュートリアルを参照している場合、「Hold」と「pieSlice1」はクラスと ID の名前にすぎません。

aa 度を事前に定義し、jQuery を使用して、データベースから得たものに応じて CSS を変更することができます。詳細については、この投稿をご覧ください。

.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});

http://jsfiddle.net/t7zLP/1/

于 2013-01-04T03:50:12.267 に答える