0

私は自分のウェブサイトのバー評価システムを作りたいと思っています。これは私が実際に持っているものです:

ここに画像の説明を入力

これはまったく見栄えがよくありません:p。指数曲線のように徐々に高さを上げていきたいです。最初は急勾配ではなく、次第に勾配が増していきます。

使用: 

height = (Math.ceil( Math.log(i) * 10) / 10 ) + settings.height

ここで、iは 0 -> 19(バーの数) の for ループ変数であり、settings.height は 15 であるベースの高さです。修正するにはどうすればよいですか?

編集：このように逆さまに ここに画像の説明を入力

4

1 に答える 1

1

以下は、デビッド・フレゴリの最初のコメントに基づいており、必要な形状と正しい向きを取得するために拡張しました。このフィドルを参照してください（彼の答えを盗むことを意図していないので、彼の答えを自由に受け入れてください）

結果

CSS 

#container {
    position: relative;
    height: 150px;
}

bar {
    position: relative;
    width: 20px;
    border: 1px solid #aaf;
    background-color: #ddf;
    margin-right: 1px;
    float: left;
    cursor: pointer;
}

JS

var baseheight = 5;
for ( var i = 0; i < 10; i++ ) {
    var h = 5*Math.pow(2,i/2) + baseheight;
    var offset = Math.ceil(150-h);
    $('#container').append($('<bar>').css('height', h).css('top', offset));
}
于 2013-03-29T16:50:39.250 に答える