有趣的win8进度条
昨天，本来这篇文章是要推到博客园首页的，但是管理员发邮件说，博文应当以分享知识为主，不应该只贴代码，想想觉得很对，就打算重新整理一下这篇文章。
刚才在安装visual studio 12，发现它的安装界面都是win8风格的，而且安装的时候有个进度条，看着挺不错，就用 jquery 实现了一下，的确挺有趣：
先说说原理吧！进度条里面的小球运动分成 3 个阶段，减速（-10px ~ 190px），匀速（190px ~ 310px），加速（310px ~ 510px）。上面的黑色框总宽度为 500 像素，小球（宽高均为 10 像素）在运动的时候，首先从 -10px 的地方起步，然后快速的到达 190px 的地方，然后再匀速的到达 310px 的地方， 最后加速到达末尾 510px 的地方。小球每一次的运动都是 jquery.animate 来实现的，每次运动完毕会触发一个回调函数，回调函数根据小球的位置决定小球下一阶段的运动过程，并且让小球持续保持运行。详细请参考代码注释。
代码：
<!DOCTYPE html> <html> <head> <style type="text/css"> * {margin:0;padding:0} .progress {width:500px;height:100px;margin:0 auto;position:relative;background-color: #000;overflow:hidden;} .progress .btn {display:block;position:absolute;width:100px;height:30px;text-align:center;line-height:30px;color:#FFF;font-size:16px;cursor: pointer;border:1px solid #000;} .progress .btn:hover {border-color:#EEE;} .star {width:10px;height:10px;border-radius:5px;background-color: #92C4E6;position:absolute;left:-10px;top:45px;} </style> <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript"> $(function(){
//效果的运行通过按钮触发，此函数即为点击按钮之后执行的回调函数 var anim = function(){ var that = $(this), thatp = that.parent();
//2. 按钮自身的动画，点击之后，跑到容器的右下角，并改变文字，完毕之后，开始运行进度条 that.animate({left:thatp.width()-that.width(),top:thatp.height()-that.height()}, "fast", function(){ var i = 200;
//解绑原有的的 click 回调函数，并重新绑定 $(".progress").children("a").text("点击停止效果").unbind("click").bind("click", function(){ var that = $(this), thatp = that.parent();
//停止小球动画并将所有的 div 移除 $(this).closest(".progress").children(".star").stop().remove();
//按钮复位 $(this).animate({left: (thatp.width()-that.width())/2, top: (thatp.height()-that.height())/2}, "slow", function(){ $(".progress").children("a").text("点击观看效果"); }).unbind('click').bind('click', anim); //重新绑定
//在按钮之后添加 5 个 div ，并将当前 jquery 内部栈退回到只含有 ['.progress']，然后迭代每一个 div }).after(new Array(6).join('<div class="star"></div>')).end().children(".star").each(function(){
//小球每次运动完毕执行的回调函数，使用 $.proxy 绑定回调函数中的 this 为当前元素 var callback = $.proxy(function(){ var that = $(this), left = parseInt(that.css("left")); //解析当前元素的 left 位置 if(left === 510) { left = -10;that.css("left", left); } //如果已经到达末尾，重置为起点 switch(left) { case -10:
//这里本来使用的是 jquery.ui.effect.js 里面的 easeInCubic，为了精简代码放弃了 that.animate({left: 190}, 700, 'swing', callback); break; case 190: that.animate({left: 310}, 1500, 'linear', callback); break; case 310:
//这里本来使用的是 jquery.ui.effect.js 里面的 easeOutCubic，为了精简代码放弃了 that.animate({left: 510}, 700, 'swing', callback).delay(1000);
break;
}
}, this);
setTimeout(callback, i); i +=200;
}); }); }, p, a;
//貌似博客园不能再博文里面写 HTML，JS 代码，所以只好自己构造 DOM， p = $(".progress").html('<a class="btn">点击观看效果</a>');
//1. 绑定按钮 click 事件 a = p.children('a').bind('click', anim);
//将按钮置于容器的中间 a.css({left: (p.width()-a.width())/2, top: (p.height()-a.height())/2}); }); </script> </head> <body> <div class="progress"></div> </body> </html>