html+css+js能不能做类似360的那种小球,在手机上运行的网页?
2015-05-22 · 百度知道合伙人官方认证企业
你是指下面这种小球吗?
这个是可以用jquery做的 它是一个jquery圆环统计插件circliful 来完成的
方法如下:
使用方法
<link href="css/jquery.circlify.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>
如果需要 fontawesome icons图片,请引入相关的CSS文件
将一个元素添加到页面中,并添加一个惟一的id值,并在data属性写上你需要的值,代码如下:
<div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="200" data-part="35" data-icon="long-arrow-up" data-icon-size="28" data-icon-color="#fff"></div>
写入JS初始化插件
$( document ).ready(function() {
$('#myStat').circliful();
});
参数
dimension / 元素的高度与宽度 / 默认值 200px X 200px
text / 圆环内显示的文本
info /圆环内text文本下方的文字信息 ,可以为空
width / 圆环的大小 / 默认值 15px
fontsize /文本的字体大小 / 默认 15px
percent / 百分比,可以是1到100间的任意数值
fgcolor / 圆环的前景色 / 默认值 #556b2f
bgcolor / 圆环的背景色 / 默认值 #eee
fill / 整个圆环的背景色 ,可以为空
type / 全环或是半环,设计 data-type="half" 显示成半圆环 / 默认值 circle
total / 总量,百分比,比如你有 750MB 空间, 350MB 是使用的. 你就可以这样设置 data-total="750" 和 data-part="350" ,圆环将会显示成百分比 36,85%
part
border / 圆环的边框.
icon / Fontawesome icon
iconsize / icon的大小
iconcolor / icon的颜色
animationstep /动画的步阶, use 0 to disable animation, 0.5 to slow down, 2 to speed up, etc / default is 1
startdegree / 开始前景动的位置 / 默认值 0
bordersize / 边框的宽度