刚才在安装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