有趣的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. youcompleteme　install and configure

    三四年前我配置vim插件的时候还都是手动配置,还没有听说vundle这个vim插件管理工具,现在配置vim插件的时候基本上都用vundle,这个插件也确实是方便快捷,只不过这东西时能话了就不清楚里面的 ...

  2. javascript日历插件

    原文:javascript日历插件 javascript日历插件 最近在尝试着写javascript日历插件,所以也到github上看国外人日历源码,或者国内人写的好点的,也在研究点,虽然看到网上有一 ...

  3. mvc拦截器

    在ASP.NET MVC中,有三种拦截器:Action拦截器.Result拦截器和Exception拦截器.这里说的是第一种和第三种.其实所谓的ASP.NET MVC拦截器,也没什么神秘的,就是一个普 ...

  4. leetcode[61] Unique Paths

    题目:给定一个m*n的矩阵,从头开始,只能往右边和下边走,一次走一格,知道走到最后一个(右下角)为止.总共有多少种走法. 典型的动态规划吧.其实从头走到尾部,和从尾部开始走到头是一样的次数.我们用一个 ...

  5. html5 Canvas画图3：1px线条模糊问题

    点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...

  6. mysql的架构

    和其他数据库相比,mysql有点与众不同,它的架构可以在多种不同场景中应用并发挥好的作用,而理解其设计是发挥好作用的先决条件 每当我们在想起mysql的逻辑架构师,我们可以构造一副mysql各组件之间 ...

  7. 使用Flexible实现手淘H5页面的终端适配(转)

    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...

  8. touch命令功能

    touch命令功能   touch fileA,如果fileA存在,使用touch命令可更改这个文件或目录的日期时间,包括存取时间和更改时间:如果fileA不存在,touch命令会在当前目录下新建一个 ...

  9. Ubuntu(Linux) + mono + jexus +asp.net MVC3

    Ubuntu(Linux) + mono + jexus +asp.net MVC3 部署 感谢  张善友 的建议,我把 微信订餐  由nginx 改成 jexus,目前运行状况来说,确实稳定了很多, ...

  10. T4模版

    T4模版 这讲适合所有的MVC程序 很荣幸,我们的系统有了体验的地址了.演示地址 之前我们发布了一个简单的代码生成器,其原理就是读取数据库的表结构,生成文本的一个方式来生成代码! 为了替代重复的劳动, ...