<button id="rkuoi"><xmp id="rkuoi">

头像

jQuery+css3网络带宽下载速度测速仪表盘动画特效

来源:http://www.yni9437.tw/js/4335.html 18***38 2019-05-04 11:29浏览(222) 收藏

一款酷炫的jQuery+css3网络带宽下载速度测速仪表盘动画特效,圆形仪表盘速度计特效。
jQuery+css3网络带宽下载速度测速仪表盘动画特效
分类:统计图 > 仪表盘 难易:初级

程序员,你不是一个人;网站开发QQ群:35248186,在线充值,或联系QQ1556472052直接充值

查看演示 下载资源: 4 下载资源 下载积分: 20 积分

js代码

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var ticks = $('.tick');
var digits = $('.digit');
var details = $('.details');
var progress = $('.progress');

var outerRingRadius = 164;
var digitRingRadius = 145;


ticks.each(function (i) {
  var angle = 210 - i * 5;
  var theta = deg2rad(angle);
  var radius = outerRingRadius + (i % 6 ? 0 : 4);
  var x = Math.cos(theta) * radius;
  var y = Math.sin(theta) * -radius;
  var transform = [
  `translate(${x}px, ${y}px)`,
  `rotate(${-angle}deg)`].
  join(' ');
  $(this).css({
    '-webkit-transform': transform,
    '-moz-transform': transform,
    'transform': transform });

});

digits.each(function (i) {
  var angle = 210 - i * 30;
  var theta = deg2rad(angle);
  var x = Math.cos(theta) * digitRingRadius;
  var y = Math.sin(theta) * -digitRingRadius;
  $(this).css({
    '-webkit-transform': `translate(${x}px, ${y}px)`,
    '-moz-transform': `translate(${x}px, ${y}px)`,
    'transform': `translate(${x}px, ${y}px)` });

});

$('.retry-button').on('click', function () {
  statValueCurrent = 0;
  updateDetails();
});


var frameCount = 100;
var frameInterval = 0.3;
var digitValueMax = 160;
var statValueMax = 87.3;
var statValueCurrent = 0;
var statValueInterval = statValueMax / frameCount;

updateDetails();


function updateDetails() {
  if (statValueCurrent.toFixed(1) > statValueMax) {
    return;
  }
  setStatValue(statValueCurrent.toFixed(1));
  statValueCurrent += statValueInterval;
  setTimeout(updateDetails, frameInterval);
}


function setStatValue(value) {
  var angle = -120 + 240 * (value / digitValueMax);
  progress.css({
    'transform': `rotate(${angle}deg)` });

  details.find('.speed').text(value);
}


function deg2rad(angle) {
  return angle * (Math.PI / 180);
}


function rad2deg(angle) {
  return angle * (180 / Math.PI);
}
</script>
标签: 仪表盘测速仪
最新交易
评论1
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1556472052

  • 头像 沙发
    05-05 10:36
    AJ***on
    感觉还是很不错的,谢谢分享!
1 2
2019年第67期开的什么马 海丰县| 东平县| 和平区| 临海市| 页游| 腾冲县| 正镶白旗| 新丰县| 依安县| 荆门市| 定远县| 陕西省| 大姚县| 枣阳市| 宁南县| 巴林右旗| 乌鲁木齐县| 孙吴县| 罗甸县| 伊春市| 蚌埠市| 南靖县| 鲜城| 虹口区| 德阳市| 昌邑市| http://xaqfvpo.tw 万安县| 许昌县| 苍梧县| 宁化县| 黑龙江省| 柞水县| 海伦市| 乌苏市| 大足县| 延长县| 德兴市| 马关县| 西华县| 定结县| 万源市| 银川市| 合川市| 厦门市| 富平县| 化德县| 恩施市| 云和县| 青海省| 宿州市| 丰都县| 大埔区| 化德县| 石家庄市| 闵行区| http://www.xzgltrq.tw 连南| 扬州市| 望谟县| 静宁县| 衡阳市| 绥德县| 海安县| 舞钢市| 祁阳县| 琼海市| 囊谦县| 贡山| 临沂市| 永靖县| 灌云县| 丰原市| 潜江市| 图片| 定安县| 绵阳市| 历史| 峨山| 称多县| 古丈县| 陵川县| 万源市| 曲周县| 大兴区| 建水县| 本溪| 鄯善县| 成都市| 黔东| 遂平县| http://7955ewo.tw 揭东县| 贵南县| 梁河县| 突泉县| 香格里拉县| 金沙县| 汤原县| 红安县| 沙洋县| 洪湖市| 海盐县| 简阳市| 博乐市| 惠来县| 信阳市| 定西市| 靖西县| 云安县| 简阳市| 东辽县| 康保县| 庄河市| 宁波市| 镇安县| 黄山市| 哈巴河县| 福清市| 宽城| 金华市| http://www.4931sat.tw 庆城县| 东安县| 宁城县| 桐柏县| 来宾市| 江都市| 耒阳市| 广安市| 陆丰市| 咸阳市| 晋中市| 常州市| 万盛区| 青岛市| 景洪市| 蓬安县| 安庆市| 新巴尔虎右旗| 白朗县| 乐山市| 绍兴县| 靖边县| 安丘市| 肃宁县| 三穗县| 江陵县| 平武县| 麻阳| 万载县| http://www.wnf008.cn 诸暨市| 宜昌市| 天祝| 建瓯市| 务川| 娄烦县| 绵竹市| 灵石县| 芦溪县| 民权县| 蒲江县| 龙川县| 南靖县| 光泽县| 汶川县| 启东市| 延边| 天等县| 泽库县| 双流县| 新田县| 阿克苏市| 泰兴市| 福贡县| 庆安县| 五河县| 武胜县| 绍兴市| http://gss987.cn 抚州市| 枣阳市| 棋牌| 黄梅县| 罗山县| 龙岩市| 阿瓦提县| 漾濞| 旅游| 扬州市| 开远市| 泸州市| 安龙县| 斗六市| 东兴市| 临颍县| 瑞昌市|