jQuery插件--根据数据加载的进度动画案例
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插件--根据数据加载的进度动画案例的更多相关文章
- JQuery 之 在数据加载完成后才自动执行函数
数据加载完成执行: $(window).load(function(){ ... }); 进入页就执行,不论等数据是否加载完成: $(document).ready(function(){ ... } ...
- jquery插件图片延时加载实例详解
效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...
- jQuery插件图片懒加载lazyload
来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...
- JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）
在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...
- asp.net数据加载进度和模态窗口的完美打开，而且窗口不被阻止
采用jquery的技术打开模态窗口,效果肯定不错,但是微软的asp.net ajax就无法用了,例如updatepanel面板和updateprogress就看不到效果,也就是jquery与asp.n ...
- osg探究补充：osg数据加载原理(插件机制简介)
前言 我们接着昨天的继续,昨天主要是讲解了DatabasePager类中的特定的成员变量以及run函数的第一部分,对所要请求加载的数据按照是否是网络数据进行分类加载模式.今天我们就看看数据是怎们加载到 ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- jquery easyui datagrid 远程加载数据----把主键渲染为值遇到的问题及解决方案
起因:数据库中一些字段存的是代表具体值的数字,需要渲染为具体值 monggodb中的字典 mysql中存放的值为:expertin代表教练擅长的搏击技能 jquery easyui中的相关代码如下:用 ...
- jquery easyui datagrid 远程加载数据----javascript法
jquery easyui有三种办法生成datagrid(数据网格),本篇专门讨论javascript借助jquey easy ui实现的方式 html部分 <main role="m ...
随机推荐
- php数据类型及运算
数据类型: 标量类型: int(intege), float, string, bool 复合类型: array, object 特殊类型: null, resouce进制转换十进制转二进制decb ...
- 记intel杯比赛中各种bug与debug【其一】：安装intel caffe
因为intel杯创新软件比赛过程中,并没有任何记录.现在用一点时间把全过程重演一次用作记录. 学习 pytorch 一段时间后,intel比赛突然不让用 pytoch 了,于是打算转战intel ca ...
- CF17E Palisection（回文树）
题意翻译 给定一个长度为n的小写字母串.问你有多少对相交的回文子 串(包含也算相交) . 输入格式 第一行是字符串长度n(1<=n<=2*10^6),第二行字符串 输出格式 相交的回文子串 ...
- unity 5.6.1 Oculus手柄输入问题
unity文档中提到 轴的 ID 是5和6,但是测试后发现,ID是6和7,很坑 void Update () { if (Input.GetKeyDown(KeyCode.JoystickButton ...
- ArcGIS api for javascript——图形-选择一个范围内的点
描述 本例展示了如何使用图形显示查询结果,如何使用draw toolbar在地图上选择图形和如何修改图形符号为“高亮”. 在地图上画一个矩形区域,加亮矩形范围内的城市.这个应用统计高亮的城市个数并列出 ...
- hadoop云盘client的设计与实现（一）
近期在hadoop云盘client项目.在做这个项目曾经对hadoop是一点都不了解呀,在网上查了好久.将client开发的是非常少的,在做这个项目的过程中遇到非常多奇葩的问题. 并且试图换过好多方案 ...
- 软件project总结
软件project的文档完结了.在这里面学到了好多东西.也通过它分析了对机房收费系统进行了更加具体的分析.尽管早就明确了之间的联系,可是越温习越体会到逻辑的重要性和全心全意为人民服务的精神. 这些文档 ...
- iOS学习9_事件分发&响应链
iOS的三种事件:触摸事件/运动事件/远程控制事件 typedef enum { UIEventTypeTouches, UIEventTypeMotion, UIEventTypeRemoteCon ...
- json数据转化成实体 存到数据库.
直接看步骤吧 1.一般我们会调用别人给的webservice获取一个字符串数据.如果为String data="xxxxxxxxxx"; 这个data事实上就是样例Enterpr ...
- vue2.0-transition配合animate.css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...