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. iptables指南

    在了解iptables之前我们先了解一下 防火墙 的概念防火墙是由Check Point创立者Gil Shwed于1993年发明并引入国际互联网,防火墙也是一种位于内部网络与外部网络之间的网络安全系统 ...

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

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

  3. 是我太天真之被BUG按在地上疯狂摩擦

    事情是这样的,我是一个追求完美的人,特别喜欢锦上添花,去年在学习python的时候做了一个作业:多重剪贴板,今天大概是吃饱了,查了一下自己的头发以后,我觉得可以挑战一下自己,所以决定为那个小程序添加一 ...

  4. JDK工具(零)--简要介绍JDK1.6自带的42个工具

    Java的开发人员肯定都知道JDK的bin目录中有"java.exe"和"javac.exe"这两个命令行工具, 但并非所有的Java程序员都了解过JDK的bi ...

  5. spring data jpa实体类映射配置

    @Entity:用来标志实体类,知名这是一个和数据库表映射的实体类 @Id注解指明这个属性映射为数据库的主键 @GeneratedValue注解默认使用主键生成方式为自增,hibernate会自动生成 ...

  6. JavaScript【1】（数据类型）

     JS系列教程(数据类型)[1]

  7. 有关于OpenGL、OpenGL ES、WebGL的小结

    转自原文 有关于OpenGL.OpenGL ES.WebGL的小结 一.   OpenGL简介 OpenGL(全写Open Graphics Library)是个定义了一个跨编程语言.跨平台的编程接口 ...

  8. svn 的使用（二）

    这篇主要介绍下 svn 钩子的使用,svn 的安装以及配置等能够查看svn 的使用(一) 我们能够在svn创建的仓库目录下看到 hooks 目录. 这里面就存放这个各种svn操作同一时候会运行的脚本文 ...

  9. PostgreSQL数据库创建/删除

    方法1 - 系统命令 sudo su - postgres #切换到postgres用户(系统用户) createdb weichen #创建数据库 psql #直接訪问数据库(默认进入本地postg ...

  10. JWT使用1

    JSON Web Token - 在Web应用间安全地传递信息 转载收藏于:http://blog.leapoahead.com/2015/09/06/understanding-jwt/ JSON ...