有趣的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

有趣的win8进度条的更多相关文章

  1. 原生javascript模仿win8等待进度条。

    一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...

  2. 类似 Dribbble 下载按钮的 SVG 弹性动画进度条

    Codrops 发布了一个如何创建一个基于弹性效果的 SVG 加载进度条教程,基于 SVG 和 TweenMax 实现.按钮开始的时候是一个带有箭头的图标,一旦它被点击,动画成一个有趣的小金属丝和一个 ...

  3. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

  4. 自主学习python文本进度条及π的计算

    经过自己一段时间的学习,已经略有收获了!在整个过程的进行中,在我逐渐通过看书,看案例,做题积累了一些编程python的经验以后,我发现我渐渐爱上了python,爱上了编程! 接下来,当然是又一些有趣的 ...

  5. 宏基4752g 开机进度条卡到75%左右，解决办法

    起因:更新win10推送的更新补丁,失败自动回退.开机进度条只能走到75%,bios进不去,最后就卡在开机的logo.(还有其他人是win7直接升级win10,也出现了这种情况.)解决办法:重刷bio ...

  6. 2019年的代码都写完了吗？不如做个Python进度条看看还剩多少

    我们都知道,进度条是用来直观展示流程所需时间的优秀工具,以免我们担心流程会突然挂掉,而且我们可以用它来预测代码运行是否正常,借助进度条,每个人都能直观地看到脚本最新的进展情况. 如果你之前没用过进度条 ...

  7. [WPF] 使用三种方式实现弧形进度条

    1. 需求 前天看到有人问弧形进度条怎么做,我模仿了一下,成果如下图所示: 当时我第一反应是可以用 Microsoft.Toolkit.Uwp.UI.Controls 里的 RadialGauge 实 ...

  8. Android -- 真正的 高仿微信 打开网页的进度条效果

    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...

  9. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

随机推荐

  1. HammerDB数据库压力工具使用简略步骤

    欢迎转载,转载请标明出处:http://blog.csdn.net/notbaron/article/details/38879681 HammerDB数据库压力工具使用简略步骤 尽管没有图,可是文字 ...

  2. iOS 学习资料汇总

    (适合初学者入门) 本文资料来源于GitHub 一.视频教程(英文) Developing iOS 7 Apps for iPhone and iPad斯坦福开放教程之一, 课程主要讲解了一些 iOS ...

  3. Struts2和Struts1的主要区别（完整版）

    Struts1和Struts2的区别和对比: Action 类: • Struts1要求Action类继承一个抽象基类.Struts1的一个普遍问题是使用抽象类编程而不是接口,而struts2的Act ...

  4. sql分页查询公式

    分页查询公式: select top PageRow(每页显示的数据行数) from 表名 where 主键  not in(select top PageRow*(当前页数-1) 主键  from ...

  5. WCF服务上应用protobuf

    WCF服务上应用protobuf Web api  主要功能: 支持基于Http verb (GET, POST, PUT, DELETE)的CRUD (create, retrieve, updat ...

  6. windows批处理研究_不断更新

    windows批处理脚本(bat),很麻烦,主要原因有: 1.bat脚本编写的风格,太古老,调用方式太奇怪. 2.windows自身运行机制就对批处理脚本有兼容性问题.比如,鼠标双击打开一个bat,与 ...

  7. Lightdm:奔跑吧GUI[已解决]

    Fedora替换gdm为lightdm解决无法登陆问题 前两天安装Codeblocks,这货安装了很多包和依赖,直接导致我重启进步去界面,卡在fedora LOGO处,如下 实在忧伤,已经因为折腾不知 ...

  8. Oracle笔试题库之问答题篇-总共60道

    1.把表A从表空间TSP1更改成表空间TSP2的方法 解答:alter table A move tablespace TSP2 2.删除表的列: 解答:alert table 表名 drop 列名 ...

  9. des和Rijndael加密

    ------------IV的作用: 为了保证数据的安全,.NET基类库中提供的私钥算法类使用称作密码块链(CBC,Cipher Block Chaining)的链模式,算法使用一个密钥和一个初始化向 ...

  10. sqlclr创建表值函数案例

    ----------------------------------------------:定义表值类型:(1.一定返回的是IEnumerable2.一定带参数3.一定有FillRowMethodN ...