有趣的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. 脉冲神经网络Spiking neural network

    (原文地址:维基百科) 简单介绍: 脉冲神经网络Spiking neuralnetworks (SNNs)是第三代神经网络模型,其模拟神经元更加接近实际,除此之外,把时间信息的影响也考虑当中.思路是这 ...

  2. 高速掌握sinox2014激动人心的ZFS和RAID技术

    Sinox2014引入激动人心的zfs系统以及其支持的RAID,让用户高速打造便宜的高可靠性文件server. ZFS文件系统的英文名称为Zettabyte File System,也叫动态文件系统( ...

  3. CSS知识总结之浏览器（持续更新）

    web页面浏览器渲染过程 1.解析html文件,并构建DOM树: 在DOM树中,每一个html标签都有一个对应的节点,并且每一个文本也有一个对应 的节点(js的textNode),DOM树的根节点就是 ...

  4. Keil中使用宏编译来定义DEBUG输出

    使用宏编译来格式化调试信息,是一个不错的方法,即可以在需要的时候打印出信息,还可以格式化我们所需要的输出. #define DEBUG 1 #if (DEBUG == 1) #define DBG(A ...

  5. Plugin For KanColleViewer – Provissy Tools V1.0

    これはKanColleViewerためのプラグインです,KanColleViewerの機能を拡張する. #介绍 / Introduction / 紹介这是一个KanColleViewer(俗称”提督很 ...

  6. CSS知识点：选择符

    一.选择符的种类 1)通配选择符 它用来给页面所有的元素设置样式 *{margin:0;padding:0;}.但是实际当中不建议这么用,页面中用到了哪些样式,就统一设置样式,因为*影响性能.也可以给 ...

  7. Function.prototype.toString

    语法:fn.toString(indentation) 改方法返回当前函数源代码的字符串,而且还可对此字符串进行操作,比如: function num(){ }; var str = num.toSt ...

  8. asp.net MVC2.0学习笔记

    asp.net;与mvc都是不可替代的:只是多一种选择:(解决了许多asp.net的许多缺点) model:充血模型.领域模型:很大程度的封装: 控制器:处理用户的交互,处理业务逻辑的调用,指定具体的 ...

  9. HBase MVCC 代码阅读（一）

    MultiVersionConcurrencyControl.java,版本 0.94.1 MultiVersionConsistencyControl 管理 memstore 中的读写一致性.该类实 ...

  10. 【ios开发】Block编程

    1 什么是block iOS SDK 4.0开始,Apple引入了block这一特性.字面上说,block就是一个代码块,但是它的神奇之处在于在内联(inline)执行的时候(这和C++很像)还可以传 ...