WEB前端线上系统课(20k+标准)-大神coderwhy全程直播授课
本文中所有给出的特效都是本人将一些需要引入的js或者css文件传到local经过测试以后展示给大家的。
必看!如何download课程
如果大家在调试的时候有问题可以随时提出来。因为每个案例代码都太多了,所以所有代码都只给出部分主要代码(便于大家在得到源码之前,可以更好的读懂特效),当然大家也可以根据右下方的导航栏直接看特效,在看了效果图以后对某个特效有兴趣,这里我会对应的提供源码下载地址。
回到顶部
v2.0统计图
2.1.html代码:
h1统计图/h1tablestyle="margin-left:auto;margin-right:auto;"trtdstyle="text-align:center;"h3style="margin-bottom:0px;"Example1/h3divid="chart1"style="width:px;height:px;padding:5px;"/divdivstyle="text-align:right;padding-right:5px;"Startdelay:inputid="start"style="width:35px"value="0"/Steps:inputid="steps"style="width:25px"value=""/Duration:inputid="duration"style="width:35px"value=""/ims/iDirection:selectid="dir"optionvalue="right"Right/optionoptionvalue="left"selectedLeft/optionoptionvalue="center"Center/option/selectbuttonid="bnt1"type="button"Animate/button/div/tdtdstyle="text-align:center;"h3style="margin-bottom:0px;"Example2/h3divid="chart2"style="width:px;height:px;padding:5px;"/divbuttonid="bnt2"type="button"DrawEvolutionLine/button/td/tr/table
2.2.js代码:
functionpInit(arr){varx=[];x.push([arr[0][0],Math.max.apply(Math,arr.map(function(i){returni[1];}))]);x.push([arr[0][0],null]);x.push([arr[0][0],Math.min.apply(Math,arr.map(function(i){returni[1];}))]);for(vari=0;iarr.length;i++){x.push([arr[i][0],null]);}data[serie].data=x;return$.plot(chart,data,g);}vard0=data[serie];varoData=d0.data;varplot=pInit(oData);varisLines=(data[serie].lines)?true:false;varsteps=(data[serie].animatordata[serie].animator.steps)
;varduration=(data[serie].animatordata[serie].animator.duration)
;varstart=(data[serie].animatordata[serie].animator.start)
0;vardir=(data[serie].animatordata[serie].animator.direction)
"right";functionstepData(){varSi=oData[0][0];varFi=oData[oData.length-1][0];varPas=(Fi-Si)/steps;vard2=[];d2.push(oData[0]);varnPointPos=1;lPoint=oData[0];nPoint=oData[nPointPos];for(vari=Si+Pas;iFi+Pas;i+=Pas){if(iFi){i=Fi;}$("#m2").html(i);while(inPoint[0]){lPoint=nPoint;nPoint=oData[nPointPos++];}if(i==nPoint[0]){d2.push([i,nPoint[1]]);lPoint=nPoint;nPoint=oData[nPointPos++];}else{vara=((nPoint[1]-lPoint[1])/((nPoint[0]-lPoint[0])));curV=(a*i)+(lPoint[1]-(a*lPoint[0]));d2.push([i,curV]);}}returnd2;}
2.3.代码效果:
2.4.源码下载: