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. [NOI2008]志愿者招募 网络流 建模

    题目描述申奥成功后,布布经过不懈努力,终于成为奥组委下属公司人力资源部门的主管.布布刚上任就遇到了一个难题:为即将启动的奥运新项目招募一批短期志愿者.经过估算,这个项目需要N 天才能完成,其中第i 天 ...

  2. nginx配置aliyun https

    server { listen 443; server_name www.goforit.com goforit.com; ssl on; ssl_certificate cert/goforit.p ...

  3. 20180929 北京大学 人工智能实践：Tensorflow笔记07

    (完)

  4. Unity Shader实现各种进度条

    1.圆形进度条shader Shader "ProgressBar360" { Properties { _BGTex("Background Texture" ...

  5. string.split 应用

    采用string.split将字符串依据分隔符,转换成字符串数组,生成的字符串数组中会包含空数组元素,需要通过StringSplitOptions.RemoveEmptyEntries参数选项去除. ...

  6. linux学习之高并发服务器篇（二）

    高并发服务器 1.线程池并发服务器 两种模型: 预先创建阻塞于accept多线程,使用互斥锁上锁保护accept(减少了每次创建线程的开销) 预先创建多线程,由主线程调用accept 线程池 3.多路 ...

  7. C语言移位

    先说左移,左移就是把一个数的所有位都向左移动若干位,在C中用<<运算符.例如: int i = 1;i = i << 2;  //把i里的值左移2位 也就是说,1的2进制是00 ...

  8. linux和unix的对照

    在之前的博客中说到,linux是一个单一内核的操作系统,但它与传统的单一内核UNIX操作系统不同. 在普通单一内核系统中,全部内核代码都是被静态编译和链接的. 而在linux中,能够动态的装入和卸载内 ...

  9. Cisco交换机解决网络蠕虫病毒入侵问题

    Cisco交换机解决网络蠕虫病毒入侵问题          今年来网络蠕虫泛滥给ISP和企业都造成了巨大损失,截至目前已发现近百万种病毒及木马.受感染的网络基础设施遭到破坏,以Sql Slammer为 ...

  10. android事件学习

    一.android处理事件有两种形式. 1.基于监听的事件处理,就是通过setXxxListenter()进行处理的. 2.基于回调的事件处理,就是View类内部的onTouchEvent(),一般是 ...