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. 服务器http处理流程

    网络请求.处理的组织: context Facade模式/指令处理引擎/简单处理机: 响应码: 只要有响应码就代表服务器已经接收到请求:无响应代表网络层出现问题,与服务器无关. 处理步骤: 1)模块( ...

  2. 洛谷2474 [SCOI2008] 天平 差分约束->枚举

    题目描述 你有n个砝码,均为1克,2克或者3克.你并不清楚每个砝码的重量,但你知道其中一些砝码重量的大小关系.你把其中两个砝码A 和B 放在天平的左边,需要另外选出两个砝码放在天平的右边.问:有多少种 ...

  3. HDU-1023 Train Problem II 卡特兰数（结合高精度乘除）

    题目链接:https://cn.vjudge.net/problem/HDU-1023 题意 卡特兰数的应用之一 求一个长度为n的序列通过栈后的结果序列有几种 思路 一开始不知道什么是卡特兰数,猜测是 ...

  4. RC Immix

    目录 RC Immix 目的 合并型引用计数 伪代码 优点和缺点 合并型引用计数法和Immix的融合 新对象 被动的碎片整理 积极的碎片整理 优点和缺点 优点 缺点 RC Immix Rifat Sh ...

  5. ifsta---统计网络接口活动状态

    ifstat命令就像iostat/vmstat描述其它的系统状况一样,是一个统计网络接口活动状态的工具.ifstat工具系统中并不默认安装,需要自己下载源码包,重新编译安装,使用过程相对比较简单. 下 ...

  6. 基于vue的无缝滚动组件

    vue-seamless-scroll A simple, Seamless scrolling for Vue.js 在awesome上一直没有发现vue的无缝滚动组件,在工作之余写了个组件,分享出 ...

  7. C#版清晰易懂TCP通信原理解析（附demo）

    [转] C#版清晰易懂TCP通信原理解析(附demo) (点击上方蓝字,可快速关注我们) 来源:周见智 cnblogs.com/xiaozhi_5638/p/4244797.html 对.NET中网络 ...

  8. 读 Paxos 到 ZooKeeper ￥ 50大洋

    一  初识 ZooKeeper              高效且可靠的分布式协调服务.解决分布式一致性问题             统一命名服务.配置管理服务.分布式锁服务.      使用: 比如配 ...

  9. ArcGIS api for javascript——加入地图并显示当前地图范围

    描述 这个示例使用Map.extent property属性接收地图范围的左下角和右上角坐标 "书签". 使用下列行创建地图: var map = new esri.Map(&qu ...

  10. 用typename和template消除歧义