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 一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商 ...
随机推荐
- 记录：springmvc + mybatis + maven 搭建配置流程
前言:不会配置 spring mvc,不知道为什么那样配置,也不知道从何下手,那么看这里就对了. 在 IDEA 中搭建 maven + springmvc + mybatis: 一.在 IDEA 中首 ...
- VS本地调试 Visual Studio远程调试监视器（MSVSMON.EXE）的32位版本不能用于调试64位进程或64位转储
vs2017 调试一致都没啥问题,今天莫名报这个错误,感觉好奇怪,网上搜索了半天也没解决,最后看着错误信息感觉很诡异,我本地调试你给我启动远程调试监测器干嘛,localhost也访问不了,ping了一 ...
- HDU1560(KB2-E IDA星)
DNA sequence Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...
- css-css和html的结合方式（四种结合方式）
(1)在每个HTML标签上面都有一个属性 style,把css和HTML结合在一起 <div style="background-color:red;color:blue;&quo ...
- vmware下载存储vmdk文件后缀变-flat处理方式
将vmware存储中的虚拟机vmdk文件下载到本地,下载完成后,下载了2个vmdk文件 一份为:xx.vmdk (通常1KB左右) 一份为:xx-flat.vmdk (此为源文件正常大小) ...
- 请求包含（Include）和请求转发（Forward）
定义 请求包含是指将另一个Servlet的请求处理流程包含进来. 请求转发是指将请求转发给别的Servlet处理. 实现 实现请求包含和请求转发,可以使用HttpServletRequest的getR ...
- eclipse安装lua
单击Eclipse->Help->Install New Software… 在Work with中输入网址 Kepler - http://download.eclipse.org/re ...
- save与Update的合并操作 标签： 关系映射 2017-07-13 15:11 7人阅读 评论(0) 收藏
做save与update的方法合并操作时,判断条件是主体对象的ID是否存在. 但是当页面中,涉及到多个主体对象的关联对象时,情况变得复杂起来,特总结项目中的几点 一.页面中的VO对象属性可以分为三类: ...
- 设置 ExpressRoute 和站点到站点并存连接
配置站点到站点 VPN 和 ExpressRoute 共存连接具有多项优势. 可以将站点到站点 VPN 配置为 ExressRoute 的安全故障转移路径,或者使用站点到站点 VPN 连接到不是通过 ...
- idea 版本控制忽略文件、文件夹设置
setting 或者底部的 设置 忽略某个文件 后面选择框可以去选择 忽略某个文件夹 后面选择框可以去选择 忽略某种文件 后面输入填写如: *.txt