css:

        *{

            margin:;

            padding:;

        }

        @media screen and (min-width:320px){ html{font-size:12px;}}

        @media screen and (min-width:360px){ html{font-size:14px;}}

        @media screen and (min-width:400px){ html{font-size:16px;}}

        @media screen and (min-width:480px){ html{font-size:20px;}}

        @media screen and (min-width:560px){ html{font-size:24px;}}

        @media screen and (min-width:640px){ html{font-size:28px;}}

        .wrap,.circle,.percent{

            position: absolute;

            width: 4.46rem;

            height: 4.46rem;

            border-radius: 50%;

        }

        .wrap{

            /*top:10px;*/

            /*left:10px;*/

            background-color: #ccc;

        }

        .circle{

            box-sizing: border-box;

            border: 0.1785rem solid #ccc;

            clip:rect(0,4.6rem,4.6rem,2.23rem);

            /**/

        }

        .clip-auto{

            clip:rect(auto,4.6rem,4.6rem,auto);

        }

        .percent{

            box-sizing: border-box;

            top:-0.14rem;

            left:-0.14rem;

        }

        .left{

            transition:transform ease;

            border: 0.1785rem solid deepskyblue;

            clip: rect(0,2.13rem,4.6rem,0);

        }

        .right{

            border: 0.1785rem solid deepskyblue;

            clip: rect(0,4.6rem,4.6rem,2.13rem);

        }

        .wth0{

            width:;

        }

        .num{

            position: absolute;

            box-sizing: border-box;

            width: 4.1rem;

            height: 4.1rem;

            line-height: 1.07rem;

            text-align: center;

            font-size: 1.07rem;

            left: 0.1785rem;

            top: 0.1785rem;

            border-radius: 50%;

            background-color: #fff;

            z-index:;

            padding-top: 0.535rem;

        }

html:

<!DOCTYPE html>

<html lang="cn">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>Document</title>

</head>

<body>

<article style="height: 100rem;"></article>

<div id="process1" class="wrap">

    <!--<div class="circle">-->

        <!--<div class="percent left"></div>-->

        <!--<div class="percent right wth0"></div>-->

    <!--</div>-->

    <!--<div class="num"><em>已售</em><br><span>80</span>%</div>-->

</div>

<article style="height: 10rem;"></article>

<div id="process2" class="wrap"></div>

<article style="height: 10rem;"></article>

<div id="process3" class="wrap"></div>

<article style="height: 10rem;"></article>

<div id="process4" class="wrap"></div>

<article style="height: 100rem;"></article>

</body>

<script src="jquery-1.11.3.min.js"></script>
<script src="animate.js"></script>
<script>
//数据传入接口：

$(function() {
　　$("#process1").FnExe({
　　　　num : "80"
　　});
　　$("#process2").FnExe({
　　　　num : "60"
　　});
　　$("#process3").FnExe({
　　　　num : "90"
　　});
　　$("#process4").FnExe({
　　　　num : "20"
　　});
});

</script>
</html>

基于jQuery插件部分animate.js：

    (function($) {

        var defaults = {

            num : "0"

        };

        var settings = {};

        var $This = null;

        function FnExe(options) {

            $This = this;

            settings = $.extend(settings,defaults,options);

//            console.log(settings);

            FnCreate( this );

            FnProcess( this );

        }

        function FnCreate(th) {

            $This = th;

            var $innerCircle = $("<div class='circle'></div>");

            $innerCircle.appendTo($This);

            var $innerLeft = $("<div class='percent left'></div>");

            $innerLeft.appendTo($innerCircle);

            var $innerRight = $("<div class='percent right wth0'></div>");

            $innerRight.insertAfter($innerLeft);

            var $innerNum = $("<div class='num'><em>已售</em><br><span>"+settings.num+"</span>%</div>");

            $innerNum.insertAfter($innerCircle);

        }

        function FnProcess(th) {

            $This = th;

            function process() {

                var percent=0;

                var $num = $This.find(".num > span").text();

                var loading = null;

                loading = setInterval(function() {

                    if(percent>50) {

                        $This.find(".circle").addClass("clip-auto");

                        $This.find(".right").removeClass("wth0");

                    }

                    $This.find('.left').css("-webkit-transform","rotate("+(18/5)*percent+"deg)");

                    $This.find(".num > span").text(percent);

                    percent++;

                    if(percent-1 == $num) {

                        clearInterval(loading);

                    }

                },30);

            }

            var flag = true;

            console.log($This);

            var $This = $This;

            console.log($This);

            $(window).scroll(function() {

                console.log($This);

                if($This.offset().top < parseInt( $(window).scrollTop() + $(window).height() * 0.3)) {

                    if(flag) {

                        $This.one("trigger",process());

                        flag = !flag;

                    }

                }

            } );

        }

        $.fn.extend({

            FnExe : FnExe

        })

    })(jQuery);

jQuery插件--根据数据加载的进度动画案例的更多相关文章

  1. JQuery 之 在数据加载完成后才自动执行函数

    数据加载完成执行: $(window).load(function(){ ... }); 进入页就执行,不论等数据是否加载完成: $(document).ready(function(){ ... } ...

  2. jquery插件图片延时加载实例详解

    效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...

  3. jQuery插件图片懒加载lazyload

    来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...

  4. JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）

    在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...

  5. asp.net数据加载进度和模态窗口的完美打开，而且窗口不被阻止

    采用jquery的技术打开模态窗口,效果肯定不错,但是微软的asp.net ajax就无法用了,例如updatepanel面板和updateprogress就看不到效果,也就是jquery与asp.n ...

  6. osg探究补充：osg数据加载原理(插件机制简介)

    前言 我们接着昨天的继续,昨天主要是讲解了DatabasePager类中的特定的成员变量以及run函数的第一部分,对所要请求加载的数据按照是否是网络数据进行分类加载模式.今天我们就看看数据是怎们加载到 ...

  7. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  8. jquery easyui datagrid 远程加载数据----把主键渲染为值遇到的问题及解决方案

    起因:数据库中一些字段存的是代表具体值的数字,需要渲染为具体值 monggodb中的字典 mysql中存放的值为:expertin代表教练擅长的搏击技能 jquery easyui中的相关代码如下:用 ...

  9. jquery easyui datagrid 远程加载数据----javascript法

    jquery easyui有三种办法生成datagrid(数据网格),本篇专门讨论javascript借助jquey easy ui实现的方式 html部分 <main role="m ...

随机推荐

  1. Unity3D 之 C# 脚本

    引用类型 :class ,interface, 数组 , delegate , object ,string (object 是C#中所有类型,包括所有的值类型和引用类型的根类,string 类型是一 ...

  2. 洛谷2863 [Usaco06JAN]牛的舞会

    题目描述 约翰的N (2 <= N <= 10,000)只奶牛非常兴奋,因为这是舞会之夜!她们穿上礼服和新鞋子,别 上鲜花,她们要表演圆舞. 只有奶牛才能表演这种圆舞.圆舞需要一些绳索和一 ...

  3. [NOIP2014提高组]联合权值

    题目:洛谷P1351.Vijos P1906.codevs3728.UOJ#16. 题目大意:有一个无向连通图,有n个点n-1条边,每个点有一个权值$W_i$,每条边长度为1.规定两个距离为2的点i和 ...

  4. 杀死超过5min闲置的终端

    #!/bin/bash #杀死超过5min闲置的终端 while [ 1 -lt 2 ] do sleep 30 for i in `w -sh | grep ":" | awk ...

  5. 编码问题异常处理：UnicodeDecodeError: 'gbk' codec can't...

    作为编码问题集合: 2)UnicodeDecodeError: 'utf-8' codec can't decode byte 0xbd in position 0: invalid start by ...

  6. SCU 1095运送物资(最短路)

    SCU 1095运送物资(最短路) X国发生了内战.起义军得到了广大人民的支持.在一次战役中,反动军队结集了大量兵力,围攻起义军的主堡W城.为支援前线,后方各个供给基地城市纷纷准备将物资运往W城.各基 ...

  7. Codeforces Round #313 (Div. 2) 解题报告

    A. Currency System in Geraldion: 题意:有n中不同面额的纸币,问用这些纸币所不能加和到的值的最小值. 思路:显然假设这些纸币的最小钱为1的话,它就能够组成随意面额. 假 ...

  8. linux下u盘检測程序

           获得U盘的插入或者拔取得信息的传统方法是在内核级执行hotplug程序.相关參数通过环境变量传递过来,再由hotplug通知其它关注hotplug的应用程序,可是效率比較低.      ...

  9. sass02

    新建一个文件夹 1 cd 进入文件夹 ,cd E:\360data\重要数据\桌面\sass, 2 compass creat hello:当前目录创建sass工程, 3 sass文件夹放置sass文 ...

  10. vue13过滤器 debounce延迟、limitBy、filterBy、orderBy

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...