4

在 HTML 中，我想做这样的事情：

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

结果将是一个 75% 填充的紫色圆圈。（和披萨一样，切成4块，缺一块）（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”属性的示例，但不明白如何使用变量来完成。如何为“pie-piece”编写 CSS？

4

2 回答 2

2

如果您指的是本教程，“Hold”和“pieSlice1”只是类和 ID 的名称。

您可以预定义一个学位，然后使用 jQuery 并根据您从数据库中获得的内容更改 CSS。查看这篇文章了解更多信息。

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

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

于 2013-01-04T03:50:12.267 回答
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 变量并使用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;使用价值旋转馅饼。还显示了带有 % 值的图例。

这几乎就是一切。有一段时间它只支持每页一个饼图（或者更确切地说是一种饼图）和一个值。稍后我会将其推送到 github 上，并且可能会在项目上工作，因为这听起来很有趣。

于 2013-01-08T05:31:31.953 回答