有趣的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. STL容器存储的内容动态分配情况下的内存管理

    主要分两种情况:存储的内容是指针:存储的内容是实际对象. 看以下两段代码, typedef pair<VirObjTYPE, std::list<CheckID>*> VirO ...

  2. Hibernat之关系的处理一对一处理

    第一步:编写两个pojo,比如一个学生表一个班级表  这里使用注解. 需要 公司表: package com.qcf.pox; import javax.persistence.CascadeType ...

  3. 第1章2节《MonkeyRunner源码剖析》概述:边界(原创)

    天地会珠海分舵注:本来这一系列是准备出一本书的,详情请见早前博文“寻求合作伙伴编写<深入理解 MonkeyRunner>书籍“.但因为诸多原因,没有如愿.所以这里把草稿分享出来,所以错误在 ...

  4. 编程算法 - 二部图确定 代码(C)

    二部图确定 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 给定一个具有n个顶点的图. 要给图上每一个顶点染色, 而且要使相邻的顶点颜色不同.  ...

  5. SQL点滴25—T-SQL面试语句，练练手

    原文:SQL点滴25-T-SQL面试语句,练练手 1. 用一条SQL语句查询出每门课都大于80分的学生姓名 name   kecheng    fenshu 张三     语文     81张三    ...

  6. 用一条SQL语句取出第 m 条到第 n 条记录的方法

    原文:用一条SQL语句取出第 m 条到第 n 条记录的方法   --从Table 表中取出第 m 条到第 n 条的记录:(Not In 版本)       *    FROM Table     id ...

  7. C++在struct与class差异

    在C++中,既能够用structkeyword进行类的定义,也能够用classkeyword进行类的定义,那么这两者究竟有什么差别呢? 唯一的一点差别是:struct和class的默认訪问权限不一样. ...

  8. [译]ava 设计模式之享元

    (文章翻译自Java Design Pattern: Flyweight) 享元模式用于最小化内存开销.它做的就是使用其他相似的对象尽可能多的分享数据. 1.享元模式类图 2.享元模式Java代码 / ...

  9. ACE模板之Jqgrid

    Asp.Net MVC中使用ACE模板之Jqgrid   第一次看到ACE模板,有种感动,有种相见恨晚的感觉,于是迅速来研究.它本身是基于bootstrap和jqueryui,但更nice,整合之后为 ...

  10. MVC ValidationAttribute 服务器端自定义验证

    MVC ValidationAttribute 服务器端自定义验证 客户端验证 上文只说了客户端的自定义验证,这样对于用户的输入还是不够可靠,用户完全可以绕过我们定义的客户端验证.所以仅有客户端的验证 ...