有趣的win8进度条

有趣的win8进度条

刚才在安装visual studio 12，发现它的安装界面都是win8风格的，而且安装的时候有个进度条，看着挺不错，就用 jquery 实现了一下，的确挺有趣：

点击停止效果

 

 

 

 

 

代码：

<!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();
                    that.animate({left:thatp.width()-that.width(),top:thatp.height()-that.height()}, "fast", function(){
                        var i = 200;
                        $(".progress").children("a").text("点击停止效果").unbind("click").bind("click", function(){
                            var that = $(this), thatp = that.parent();
                            $(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("点击观看效果");
                            }).bind('click', anim);
                        }).after(new Array(6).join('<div class="star"></div>')).end().children(".star").each(function(){
                            var callback = $.proxy(function(){
                                var that = $(this), left = parseInt(that.css("left"));
                                if(left === 510) { left = -10;that.css("left", left); }
                                switch(left) {
                                case -10:
                                    that.animate({left: 190}, 700, 'swing', callback);
                                    break;
                                case 190:
                                    that.animate({left: 310}, 1500, 'linear', callback);
                                    break;
                                case 310:
                                    that.animate({left: 510}, 700, 'swing', callback).delay(1000);
                                    break;
                                }
                            }, this);
                            setTimeout(callback, i);
                            i += 200;
                            });
                    });
                }, p, a;
                p = $(".progress").html('<a class="btn">点击观看效果</a>');
                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>

 

 

分类: javascript

标签: jquery win8