jQuery页面滚动数字增长插件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="jQuery.running.css" />
<style>
ul,li{list-style: none;}
h3{font-size: 50px;}
html,body{
height: %;
}
</style>
</head>
<body>
<div class="item">
<ul>
<li><h3><span class="animateNum" data-animatetarget="999.9">999.9</span>万</h3></li><!--需要为小数点-->
<li><h3><span class="animateNum" data-animatetarget="30.0">30.0</span>%</h3></li>
<li>
<div class="prograss">
<div class="bar animateBar prograss_bar_yellow" data-animatetarget="" style="width:80%;"></div>
</div>
</li>
<li>
<!--pie-->
<div class="pie animatePie" data-animatetarget="">
<div class="pieLeft">
<div class="pieLeftInner"></div>
</div>
<div class="pieRight">
<div class="pieRightInner"></div>
</div>
<div class="pieInner"><span></span>%</div>
</div>
<!--pie-->
</li>
</ul>
</div>
<script src="../jquery.min.js"></script>
<script src="jQuery.running.js"></script>
<script>
$(function(){
$("body").running(); });
</script>
</body>
</html>
/*pie*/
.pie{ width: 120px; height: 120px; border-radius: 50%; background: #e95549; position:relative; margin-top:20px; }
.pieLeftInner,
.pieRightInner { width:120px; height:120px; background-color:#e5e5e5; border-radius:100px; position:absolute; }
.pieLeftInner { clip:rect(0px,120px,120px,60px); -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); }
.pieRightInner { clip:rect(0px,60px,120px,0px); -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); }
.pieLeft,
.pieRight { width:120px; height:120px; position:absolute; z-index:1; }
.pieLeft { clip:rect(0px,120px,120px,60px); }
.pieRight { clip:rect(0px,60px,120px,0px); }
.pieInner { width:80px; height:80px; margin:20px 0 0 20px; background-color:#fff; border-radius:100px; position:absolute; z-index:1; text-align:center; line-height:80px; font-size:24px; font-weight:bold; color:#e25a4a; font-family:"寰蒋闆呴粦", "榛戜綋";} /*prograss*/
.prograss{
background:#eee; height:15px; width:80%; position:relative; border-radius:2px; margin-top:10px;
}
.prograss .bar{
background:#e95549; height:100%; width:10%; border-radius:2px 0 0 2px;
}
.prograss_bar_yellow{
background:#f8b757 !important;
}
(function($) {
$.fn.running = function() {
function n() { //数字滚动
var t = $(".animateNum");
var n = {
top: $(window).scrollTop(),
bottom: $(window).scrollTop() + $(window).height()
};
t.each(function() {
var t = $(this).attr("data-animateTarget");
n.top <= $(this).offset().top + $(this).height() && n.bottom >= $(this).offset().top && !$(this).data("start") && ($(this).data("start", !0), new AnimateNum({
obj: $(this),
target: t,
totalTime: 1e3
}))
})
};
function b() { //柱形图滚动
var t = $(".animateBar");
var n = {
top: $(window).scrollTop(),
bottom: $(window).scrollTop() + $(window).height()
};
t.each(function() {
var t = $(this).attr("data-animateTarget");
n.top <= $(this).offset().top + $(this).height() && n.bottom >= $(this).offset().top && !$(this).data("start") && ($(this).data("start", !0), new AnimateBar({
obj: $(this),
target: t,
totalTime: 1e3
}))
})
};
function p() { //圆圈滚动
var t = $(".animatePie");
var n = {
top: $(window).scrollTop(),
bottom: $(window).scrollTop() + $(window).height()
};
t.each(function() {
var t = $(this).attr("data-animateTarget");
n.top <= $(this).offset().top + $(this).height() && n.bottom >= $(this).offset().top && !$(this).data("start") && ($(this).data("start", !0), new AnimatePie({
obj: $(this),
target: t,
totalTime: 1e3
}))
})
};
$(window).bind("scroll", function() { //当window滚动的时候执行
n();
b();
p()
});
function AnimateNum(t) {
this.obj = t.obj, this.target = t.target.toString(), this.totalTime = t.totalTime || 1e3, this.init()
};
function AnimateBar(t) {
this.obj = t.obj, this.target = t.target.toString(), this.totalTime = t.totalTime || 1e3, this.init()
};
function AnimatePie(t) {
this.obj = t.obj, this.target = t.target.toString(), this.totalTime = t.totalTime || 1e3, this.init()
};
AnimateNum.prototype = {
init: function() {
return this.target ? (this.animation(), void 0) : !1
},
animation: function() {
var t = this,
i = this.target.indexOf("."),
e = 0;
i >= 0 && (e = this.target.length - i - 1);
var n = this.target.replace(".", ""),
s = this.totalTime / 30 | 0,
a = n / s | 0,
r = 0,
h = 0;
t.timer = setInterval(function() {
r++, h += a, t.obj.html(h / Math.pow(10, e)), r >= s && (clearInterval(t.timer), t.obj.html(t.target))
}, 30)
}
};
AnimateBar.prototype = {
init: function() {
return this.target ? (this.animation(), void 0) : !1
},
animation: function() {
var t = this,
i = this.target.indexOf("."),
e = 0;
i >= 0 && (e = this.target.length - i - 1);
var n = this.target.replace(".", ""),
s = this.totalTime / 30 | 0,
a = n / s | 0,
r = 0,
h = 0;
t.timer = setInterval(function() {
r++, h += a, t.obj.css('width', h / Math.pow(10, e) + '%'), r >= s && (clearInterval(t.timer), t.obj.animate({
'width': t.target + '%'
}))
}, 30)
}
};
AnimatePie.prototype = {
init: function() {
return this.target ? (this.animation(), void 0) : !1
},
animation: function() {
var t = this;
s = this.totalTime / 60 | 0;
r = 0;
t.i = 0;
t.count = 0;
t.j = 0;
num = t.target;
function start1() {
t.obj.find('.pieInner span').html(t.i + 1);
if(num == 0) return false;
t.i = t.i + 1;
if(t.i == num) {
clearInterval(t.t1)
}
if(t.i == 50) {
clearInterval(t.t1);
num2 = num - 50;
t.t2 = setInterval(start2, 1)
};
t.obj.find(".pieLeftInner").css("-o-transform", "rotate(" + t.i * 3.6 + "deg)");
t.obj.find(".pieLeftInner").css("-moz-transform", "rotate(" + t.i * 3.6 + "deg)");
t.obj.find(".pieLeftInner").css("-webkit-transform", "rotate(" + t.i * 3.6 + "deg)")
};
function start2() {
t.obj.find('.pieInner span').html(50 + t.j + 1);
if(num2 == 0) return false;
t.j = t.j + 1;
if(t.j == num2) {
clearInterval(t.t2)
}
if(t.j == 50) {
clearInterval(t.t2)
};
t.obj.find(".pieRightInner").css("-o-transform", "rotate(" + t.j * 3.6 + "deg)");
t.obj.find(".pieRightInner").css("-moz-transform", "rotate(" + t.j * 3.6 + "deg)");
t.obj.find(".pieRightInner").css("-webkit-transform", "rotate(" + t.j * 3.6 + "deg)")
};
t.t1 = setInterval(function() {
r++;
r >= s && (clearInterval(t.timer), start1())
}, 30)
}
}
}
})(jQuery);
根据项目需要进行代码修改
jQuery页面滚动数字增长插件的更多相关文章
- jQuery页面滚动监听事件及高级效果插件
jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...
- 好用的jquery.animateNumber.js数字动画插件
在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...
- jquery页面滚动显示浮动菜单栏锚点定位效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- kissui.scrollanim页面滚动动画库插件
简介 kissui.scrollanim是一款实用的纯JS和CSS3页面滚动动画库插件.通过该插件可以使元素进入浏览器视口的时候,展示指定的CSS3动画效果. 下载地址及演示 在线演示 在线下载 安装 ...
- jquery页面滚动到指定id
//jquery页面滚动到指定id $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html ...
- jquery 页面滚动到底部自动加载插件集合
很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...
- jQuery页面滚动图片等元素动态加载实现
一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...
- 一款很好用的页面滚动元素动画插件-AOS.JS
aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. 加载方法 ...
- [转]jQuery页面滚动图片等元素动态加载实现
本文转自:http://www.zhangxinxu.com/wordpress/?p=1259 一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商 ...
随机推荐
- 撩课-Web大前端每天5道面试题-Day19
1.实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number.String.Object.Array.Boolean)进行值复制 考察点1:对于基本数据类型和引用数据 ...
- CSS3选择器:nth-child和:nth-of-type之间的差异——张鑫旭
一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使 ...
- Unity3D 场景切换加载进度条实现
需要三个场景,场景A,场景B,场景C: 场景A:一个按钮,点击加载场景B: 场景B:从A切换到C过度场景,加载进度条: 场景C:目标场景: 创建OnProgress.cs脚本: using Syste ...
- java多线程3种方式
Java多线程实现方式主要有三种:继承Thread类.实现Runnable接口.使用ExecutorService.Callable.Future实现有返回结果的多线程.其中前两种方式线程执行完后都没 ...
- [微信小程序] 微信小程序富文本-wxParse的使用
最近小程序蛮火的,公司要做于是学了一点点小程序 不知道你们有没有遇到过这种问题: 从公司服务器获取的文章内容是有HTML标签格式的一段内容,但是微信是不支持这些标签的,怎么办呢? 1.一般网站后台的文 ...
- mysql if()
类似三元运算符 ,"男","女") 结果:
- wmware中网络设置技巧
wmware中网络的三种方式: .............................................. (1)桥接模式: 将主机网卡与虚拟机虚拟的网卡利用虚拟网桥进行通信. 默认 ...
- 通过Places API Web Service获取兴趣点数据
实验将爬取新加坡地区的银行POI数据 数据库采用mongodb,请自行安装,同时申请google的key 直接上代码 #coding=utf-8 import urllib import json i ...
- OpenStreetMap、googleMap等经纬度和行列号之间相互转化（python，JavaScript，php，Java，C#等）
python: # OpenStreetMap经纬度转行列号 def deg2num(lat_deg, lon_deg, zoom): lat_rad = math.radians(lat_deg) ...
- 探索ORM之iBati（一）
ibatis iBATIS一词来源于“internet”和“abatis”的组合,是一个由Clinton Begin在2001年发起的开放源代码项目.最初侧重于密码软件的开发,现在是一个基于Jav ...