0

我想为我的网站制作一个酒吧评级系统,这就是我实际拥有的:

在此处输入图像描述

这看起来一点也不好看:p。我希望高度像指数曲线一样逐渐增加。刚开始不会太陡,之后会逐渐增加。

使用:

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

其中i是从 0 -> 19(条数)的 for 循环变量,settings.height 是 15 的基本高度。我应该怎么做才能纠正它?

编辑:像这样,但颠倒 在此处输入图像描述

4

1 回答 1

1

以下内容基于 David Fregoli 的初始评论,我对其进行了扩展以获得所需的形状和正确的方向。看到这个小提琴(无意窃取他的答案,所以请随意接受他的)

结果

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 回答