有趣的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. Errors occurred during the build. Errors running builder &#39;JavaScript Validator&#39; on

    eclipse又一次编译时候就会报错Errors occurred during the build. Errors running builder 'JavaScript Validator' on ...

  2. 【转】height,posHeight和pixelHeight区别

    height 返回高度    带单位 posHeight    不带单位的数字 pixelHeight 转换成像素后的数字    不带单位 更多资料 http://www.1fan.com.cn

  3. MVC创建XML,并实现增删改

    原文:MVC创建XML,并实现增删改 如果创建如下的XML: <?xml version="1.0" encoding="utf-8" standalon ...

  4. sql优化的50中方法

    查询速度慢的原因很多,常见如下几种:    1.没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷)    2.I/O吞吐量小,形成了瓶颈效应.    3.没有创建计算列导致查询不优化 ...

  5. C语言第12轮：指针

    C语言第12轮:指针 [学习目标] 1.        指针 2.        指针与数组 A: 指针的概念 内存存储单元按字节排序.每一个字节编有序号.我们称之为地址.因为能够通过地址就能够找到所 ...

  6. 第1章3节《MonkeyRunner源码剖析》概述:架构(原创)

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

  7. Mysql之IN 和 Exists 用法

    1.基本用法 IN:后面的子查询 是返回结果集的,换句话说执行次序和Exists()不一样.子查询先产生结果集,然后主查询再去结果集里去找符合要求的字段列表去.符合要求的输出,反之则不输出. Exis ...

  8. leetcode第18题--Letter Combinations of a Phone Number

    Problem: Given a digit string, return all possible letter combinations that the number could represe ...

  9. Android项目---TouchListener

    public static interface View.OnTouchListener android.view.View.OnTouchListener Known Indirect Subcla ...

  10. Javascript多线程引擎(八)

    Javascript多线程引擎(八)    Javascript 多线程项目, 做到现在已经快3个月了(加上前期准备编译原理和必要的文档), 该项目(js-engine)已经快进入尾声了, 现在该引擎 ...