有趣的win8进度条

爱谁谁a

　　昨天，本来这篇文章是要推到博客园首页的，但是管理员发邮件说，博文应当以分享知识为主，不应该只贴代码，想想觉得很对，就打算重新整理一下这篇文章。
　　刚才在安装visual studio 12，发现它的安装界面都是win8风格的，而且安装的时候有个进度条，看着挺不错，就用 jquery 实现了一下，的确挺有趣：


　　先说说原理吧！进度条里面的小球运动分成 3 个阶段，减速（-10px ~ 190px），匀速（190px ~ 310px），加速（310px ~ 510px）。上面的黑色框总宽度为 500 像素，小球（宽高均为 10 像素）在运动的时候，首先从 -10px 的地方起步，然后快速的到达 190px 的地方，然后再匀速的到达 310px 的地方， 最后加速到达末尾 510px 的地方。小球每一次的运动都是 jquery.animate 来实现的，每次运动完毕会触发一个回调函数，回调函数根据小球的位置决定小球下一阶段的运动过程，并且让小球持续保持运行。详细请参考代码注释。
　　代码：







* {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;}



$(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('')).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('点击观看效果');
                //1. 绑定按钮 click 事件
a = p.children('a').bind('click', anim);
                //将按钮置于容器的中间
a.css({left: (p.width()-a.width())/2, top: (p.height()-a.height())/2});
});