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. POJ 3863 Business Center

    Business Center Time Limit: 1000ms Memory Limit: 65536KB This problem will be judged on PKU. Origina ...

  2. Win 7中开启Telnet功能

    参看以下文章: http://winsystem.ctocio.com.cn/Longhorn/472/8756972.shtml

  3. ecnu 1244

    SERCOI 近期设计了一种积木游戏.每一个游戏者有N块编号依次为1 ,2,-,N的长方体积木. 对于每块积木,它的三条不同的边分别称为"a边"."b边"和&q ...

  4. Java Exception和Error的差别

    Java中异常的抽象类是Throwable,在此基础上.派生出两大类:Error和Exception. Error是程序中的严重错误,不应该用try-catch包括.Javadoc的说明例如以下: A ...

  5. 使用Java8提供的Duration类制作字幕时间轴调整工具

    网上下载的字幕有时和片源的时间轴不一致.我们能够自己写一个工具来调整,也就是总体向前移动几秒,或者向后移动几秒.Java8中提供的Duration类使得这样的时间计算极其方便.以下就以最简单的srt字 ...

  6. 【SICP练习】152 练习4.8

    练习4-8 原文 Exercise 4.8. "Named let" is a variant of let that has the form (let <var> ...

  7. 给QQ群发送消息

    地址:http://d.web2.qq.com/channel/send_qun_msg2 方式:POST 參数: r  = {"group_uin":2393471267,&qu ...

  8. vue25---vue2.0变化

    组件模版: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. PIO Core

    PIO核概述 具有Avalon接口的并行输入/输出(parallel input/output - PIO)核,在Avalon存储器映射(Avalon Memory-Mapped Avalon-MM) ...

  10. JavaScript 与Document

    JavaScript JavaScript   是脚本语言, 需要有宿主文件,  他的宿主文件是HTML文件. 可以写在head中  body中 和</heml>之后   一般写在< ...