今天下午吃完饭就坐在电脑旁整一个进度条的动画效果，整这个效果自己也是醉了，虽然各方面都考虑到了，但是还会有点误差，因为进度条经过一个点的时候，前面半径发生变化，还要考虑到小飞机的长度问题，不能停留在圆点上，必须考虑一定的范围，刚开始没考虑圆点的直径问题，，误差很大，后来把直径问题也考虑到了，但是还会有小误差，设计的点直径大小在飞机经过前后发生了变化。
首页需要根据程序输出的数，总数、小飞机要执行的动画距离及两个要设置的点，算出它们各自所占的百分比，根据总长度，算出各自的值，然后定位； 在动画执行前需要用算出小飞机执行的长度，跟两个固定的点做比较，当执行动画长度大于某个点的left减去直径和飞机长度且小于这个点left值时候，取个固定的值，让飞机在点的左边；当到最后一个点和前一个点的时候，不再考虑直径问题，只考虑飞机长度； html代码：
===><p>发布商品 <span>40</span> 条<br>同行排名：365====”stepTip”>提升获取询盘机会2倍>====>提升获取询盘机会2倍==></div>
主要实现js代码如果下：
var proStepBox = $(‘div.proStepBox’),proStep = $(‘.proStep’,proStepBox),allW = proStep.width(),proHasDot = $(‘#proHasDot’),perAlldot = $(‘div.perAlldot’),perAllNum = parseInt(perAlldot.text()),perCur = parseInt(proHasDot.find(‘span’).text())/perAllNum,layL = allW*perCur,dot = $(‘div.stepDot’).not(‘div.stepDot:last’);dot.each(_this = $(this),perc1= parseInt(_this.text())/perAllNum,prodot1L = allW*perc1;_this.css(‘left’,prodot1L);if(layL>=prodot1L-36-39&&layL<prodot1L)layL=prodot1L-36-39;});if(layL>=allW-39&&layL<allW)layL=allW-39-10;if(allW == layL)layL = layL-39;$(function(){proHasDot.animate({‘width’:layL},{step: function(now, fx) {$(_this = $(this),l =parseInt($(this).css(“left”).replace(‘px’,”));if(now >= l){_this.addClass(‘stepPass’);_this.find(“em”).addClass(‘dotY’);}})},complete: (layL==allW-39){ //当达到百分之百的时候需要设置的$(“.stepDot:last “).addClass(‘stepPass’);$(“.stepDot:last “).find(“em”).addClass(‘dotY’);$(this).find(‘i’).css(‘display’,’none’);}}},”slow”)});
虽然功能实现了，但是还需要考虑一定的误差，当第一个点离原点的距离小于小飞机的宽度和，两个点之间的距离小于飞机宽度的时候，就会出现各种问题
都可以…孔子的,老子的. 孙子的…都可以
