zcircleMove

功能描述

快速显示进度,使用于进度百分比

依赖的插件

无依赖插件

快速使用

    <div class="surePass">
    <div class="anyield">
    <p><span>10.33</span>%<i>+</i><span>1.2</span>%</p>
    <p>预期年化收益</p>
    </div>
    <canvas class="circleRun" data-run="0" id="canvasThree" amout="1000" nowData="1000"></canvas>
    </div>
    var findCanvas=$("#canvasThree");
    var percents=findCanvas.attr('nowData')/findCanvas.attr('amout');
    percents=0.25;
    //percents 为百分比的值  范围 0- 1
    runCircle(
       { 
        obj:'canvasThree', 
        percent:0.25,
        url:'image/fire.png',   //飞机小图地址
        imgWidth:30,
        imgHeight:30,
        circleBottomColor:"#e6eaed",//圆环底色
        outerColorStart:'#ebf7ff',  //外部圆环 渐变色
        outerColorMid:'#d8eefc',
        outerColorEnd:'#a7cee7',
        innerColorStart:'#6fbef0',  //内部圆环 渐变色
        innerColorEnd:'#058ee4',
       }
    );
    var run= runCircle(
       { 
        obj:'canvasThree2', 
        percent:1
       }
    );	
    runCircle(
       { 
        obj:'canvasThree3', 
        percent:0.75
       }
    );;		
    var count=0;
    $(".circleRun").each(function(){
        var obj=$(this)[0];
        var canvasW=parseInt($(this).parent().width())*0.76;
        obj.width = canvasW;
        obj.height = canvasW;
        $(".restart")[0].style.height= canvasW+"px";
    })
    var reTimer;
    $(".restart").click(function(){
         var run=$("#canvasThree2").attr("data-run");
         if(run==0){
             clearTimeout(reTimer)
             reTimer=setTimeout(function(){
                  runCircle({ 
                    obj:'canvasThree2', 
                    percent:1
                   })   
             },200) 
         }else{
             clearTimeout(reTimer)
            return;
         }
    })

特别说明

使用时请注意目前有两个图标
image/fire.png
image/zstart.png
是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18