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 ...
随机推荐
- Xor Sum 2（位运算）
D - Xor Sum 2 Time limit : 2sec / Memory limit : 1024MB Score : 500 points Problem Statement There i ...
- 细说ReactiveCocoa的冷信号与热信号（一）
热信号:事件触发: 冷信号:订阅出发: 从本质上来说,是信号的存在和产生,是静态信号和动态信号的区别. 背景 ReactiveCocoa(简称RAC)是最初由GitHub团队开发的一套基于Cocoa的 ...
- Linux-CentOS5/6启动流程
Linux-CentOS5/6启动流程
- mysql(for update)悲观锁总结与实践
悲观锁,正如其名,它指的是对数据被外界(包括本系统当前的其他事务,以及来自外部系统的事务处理)修改持保守态度,因此,在整个数据处理过程中,将数据处于锁定状态.悲观锁的实现,往往依靠数据库提供的锁机制( ...
- 解决Python 插查 MySQL 时中文乱码问题
首先找到这里的解决方法, count = cursor.fetchall() for i in count: idc_a = i[0] if isinstance(idc_a, unicode): i ...
- [2012山东省第三届ACM大学生程序设计竞赛]——Mine Number
Mine Number 题目:http://acm.sdut.edu.cn/sdutoj/problem.php? action=showproblem&problemid=2410 Time ...
- 【LeetCode-面试算法经典-Java实现】【032-Longest Valid Parentheses（最长有效括号）】
[032-Longest Valid Parentheses(最长有效括号)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a string contai ...
- poj--3281-- DiningI(最大流)
Dining Time Limit: 2000MS Memory Limit: 65536KB 64bit IO Format: %I64d & %I64u Submit Status ...
- Controller接口控制器2
5.ServletForwardingController 将接收到的请求转发到一个命名的servlet,具体示例如下: package cn.javass.chapter4.web.servlet; ...
- Core J2EE Patterns - Service Locator--oracle官网
原文地址:http://www.oracle.com/technetwork/java/servicelocator-137181.html Context Service lookup and cr ...