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 一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商 ...
随机推荐
- execution表达式
execution(<修饰符模式>?<返回类型模式><方法名模式>(<参数模式>)<异常模式>?) 除了返回类型模式.方法名模式和参数模式外 ...
- JS基础（三）
25.使用JS操作CSS样式 DHTML表示动态HTML(Dynamic HTML,DHTML),不是标记语言,只是一种由微软提出的网页脚本化概念,目标是结合JS+HTML+CSS设计动态特效,得到很 ...
- box-sizing 属性
box-sizing属性可以为三个值: content-box,border和padding不计算入width之内 padding-box,padding计算入width内 border-box,bo ...
- （项目积累的）SQL数据库点滴
最近的的系统用的数据库是mssql,软件mssql 2008 r2 1.存储过程:后勤的综合管理系统(后端内网访问)三层架构配套用的是存储过程,里面列表展示的都是用存储过程,如下: 1)数据库脚本 U ...
- csv注入漏洞原理&&实战
前言 为了找工作,巩固巩固知识.本文会介绍 csv 注入漏洞的原理,最后给出一个示例. 正文 在 csv 文件 和 xlsx 文件中的每一项的值如果是 =, @, +, - 就会被 excel 识 ...
- 关于jsp页面中时间显示问题
首先说明一下情况,在MySQL数据库中获取的时间显示在jsp页面中不是按指定格式显示,显示的是类似于这种--Tue Jun 18 00:00:00 CST 2013.而想要的仅仅是年月日而已. 对于这 ...
- springboot学习入门之四---开发Web应用之Thymeleaf篇
http://tengj.top/2017/03/13/springboot4/ 1项目结构 说明: root package结构:com.dudu 应用启动类Application.java置于ro ...
- 如何在前端项目中引用bootstrap less？
在基于bootstrap css框架的前端项目开发中,如果有grunt build系统,那么工作流是:客制化less,在less中定义自己的 CSS,同时可以随意引用bootstrap中预定义好的cs ...
- 【Kettle】3、数据源连接配置
1.各系统版本信息 System:Windows旗舰版 Service Pack1 Kettle版本:6.1.0.1-196 JDK版本:1.8.0_72 2.连接介绍 关于Kettle数据源连接方式 ...
- Java 两个日期间的天数计算
在Java中计算两个日期间的天数,大致有2种方法:一是使用原生JDK进行计算,在JDK8中提供了更为直接和完善的方法:二是使用第三方库. 1.使用原生的JDK private static long ...