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 一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商 ...
随机推荐
- Java的简单书写格式
在一个java源代码中只能出现一个public类,而且必须跟文件名相同 在源代码的全局域类中只有 public 和 default 两种可见度 全局域不能写代码,只能定义类 成员类的构造方法和类的可见 ...
- Exception的情况——java基础1
除数为0等ArithmeticException,是RuntimException的子类.而运行时异常将由运行时系统自动抛出,不需要使用throw语句.Java编译器允许忽略运行时异常,一个方法可以既 ...
- windows多线程窗口程序设计
掌握windows基于消息驱动的窗口应用程序设计的基本方法,掌握窗口程序资源的概念与设计,掌握常用的消息的程序处理方法,掌握文字图形输出相关函数编程.掌握设计的基本方法(选项),掌握时钟消息设计动画程 ...
- Hibernate的多对多实例
在完成了一对多的实例的基础上,继续做多对多实例.例子是老师和学生,一个老师教多个学生,一个学生也有多个老师. 文档结构如图:
- save与Update的合并操作 标签： 关系映射 2017-07-13 15:11 7人阅读 评论(0) 收藏
做save与update的方法合并操作时,判断条件是主体对象的ID是否存在. 但是当页面中,涉及到多个主体对象的关联对象时,情况变得复杂起来,特总结项目中的几点 一.页面中的VO对象属性可以分为三类: ...
- jquery validation表单验证插件2。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- MySQL案例07:MySQL5.7并发复制隐式bug
我们MySQL线上环境大部分使用的是5.7.18的版本,这个版本已修复了很多bug,但针对主从复制的bug还是有很多的,尤其是一些组复制.并行复制的bug尤为突出,在5.7.19版本有做相应改善和修复 ...
- MySQL Flashback 工具介绍
MySQL Flashback 工具介绍 DML Flashback 独立工具,通过伪装成slave拉取binlog来进行处理 MyFlash 「大众点点评」 binlog2sql 「大众点评(上海) ...
- Allure 安装及使用
linux下安装方法 Allure requires Java 8 or higher npm install -g allure-commandline --save-dev (如果npm不能 ...
- Linux系统设置运行级别
设置运行级别 查看开机加载级别:7个级别 规范场景默认都是3 cat /etc/inittab --> 系统开机启动加载的文件,可以设置运行级别 # Default runlev ...