封装一个圆形进度条jQuery插件

$(function () {

  /*
  传入一个对象,
  circleR/circleL 是左右两个圆的选择器
  percentEle是中间百分比元素的选择器
  number为百分比,比如85%就写85
  time为动画的总时长,毫秒值
  timeFunction 动画时间函数
  */
// 封装成jq静态方法
  $.extend({
    circlePorgress : function (options) {
      options = options || {};
      //1. 设置默认值
      var defaults = {
        circleL :  ".circle-l",
        circleR :  ".circle-r",
        percentEle :  ".percent",
        number :  100,
        time : 6000,
        timeFunction : "linear"
      };
      // 2.传入的对象覆盖默认对象
      for (var key in options) {
        defaults[key] = options[key];
      }


      // 百分比换算成角度值
      var deg = 360/100 * defaults.number;
      // 2.计算动画的时间
      // 一度的时间
      var oneTime = defaults.time/360;
      // 根据度数算总时间
      var allTime = oneTime * deg;


      // 1获取第一个内联样式
      var sheet = document.styleSheets[0];

      // 如果角度大于180,则需要两个圆都转
      if (deg > (180)) {
          // 插入rrotate动画
          sheet.insertRule ( "@keyframes lrotate{\n" +
            "    from {\n" +
            "        transform: rotate(45deg);\n" +
            "    }\n" +
            "    to {\n" +
            "        transform: rotate(" + (deg+45-180) + "deg);\n" +
            "    }\n" +
            "}",sheet.cssRules.length);
          // 插入rrotate动画
          sheet.insertRule ( "@keyframes rrotate{\n" +
            "    from {\n" +
            "        transform: rotate(45deg);\n" +
            "    }\n" +
            "    to {\n" +
            "        transform: rotate(225deg);\n" +
            "    }\n" +
            "}",sheet.cssRules.length);


        // 左边动画需要的时间 一度需要的时间乘左边的度数
        var ltime = oneTime * (deg-180);
        // 设置添加动画
        $(defaults.circleL).css({animation: "lrotate "+ltime+"ms " +defaults.timeFunction+ " "+(defaults.time/2)+"ms forwards"});
        $(defaults.circleR).css({animation: "rrotate "+ (defaults.time/2)+"ms " +defaults.timeFunction+ " forwards"});
      } else {

          // 插入rrotate动画
          sheet.insertRule ( "@keyframes rrotate{\n" +
            "    from {\n" +
            "        transform: rotate(45deg);\n" +
            "    }\n" +
            "    to {\n" +
            "        transform: rotate(" + (deg+45) + "deg);\n" +
            "    }\n" +
            "}",sheet.cssRules.length);
          // 添加动画                                   所有时间
          $(defaults.circleR).css({animation: "rrotate " + allTime + "ms " +defaults.timeFunction+ " forwards"});
        }


      // 中间百分比文字的叠加
      var count = 1;
      var timer = setInterval(function () {
        if (count >= defaults.number) {
          clearInterval(timer);
        }

        $(defaults.percentEle).text(count + "%");
        count += 1;
      },3.6*oneTime); // 一度的角度乘一度的时间
    }
  });

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值