javascript – 用CSS概述循环元素

前端之家收集整理的这篇文章主要介绍了javascript – 用CSS概述循环元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个用以下样式创建的圆圈:
.circle {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  -webkit-border-radius: 100%;
}

我想在这个圆圈周围有一个轮廓,但是,我希望它只是围绕圆圈的一部分来产生一个百分比.

例如:

> 50%将创建从12点到6点的轮廓
> 25%将创建从12点到3点的轮廓
> 66%将创建从12点到8点的轮廓

作为宽度和高度并定义,我可以通过在相同的位置创建一个圆来创建一个轮廓,虽然我不知道如何创建“饼”形状.

我还希望能够支持尽可能多的浏览器.

提前致谢.

解决方法

基本上,你使用任何能够生成饼图的库,然后在饼图中放置一个圆圈,与你的页面(或元素)背景颜色相匹配,这样它看起来就像一个甜甜圈(实际上圆环图是你正在寻找的对于).当然,您只为您的应用程序使用两个片段.

https://github.com/azagniotov/pielicious

Addon到http://raphaeljs.com/

即使在IE8上也能完美运行.

我在当前项目中将其改编为自定义knockout.js绑定.这就是结果:

猜你在找的JavaScript相关文章