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 一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商 ...
随机推荐
- tcpcopy + tcpdump 离线回放
简单来说,就是用tcpdump记录线上请求,用tcpcopy来重放,如下图所示: 有关 tcpdump 的命令详解请参考: http://www.cnblogs.com/ggjucheng/arc ...
- 山东第四届省赛： Boring Counting 线段树
http://acm.sdibt.edu.cn/JudgeOnline/problem.php?id=3237 Problem H:Boring Counting Time Limit: 3 Sec ...
- 使用Hexo和Github Pages快速搭建个人博客
在编程路上,每天都在网上查看别人的博客,大牛的文章写得通俗易懂,同时博客网站也非常华丽.作为出入编程的一枚小白也想拥有这样一个自己的网站.那就立马去买一个域名了,在网上找教程来搭建. 搭建的过程还算比 ...
- 您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭
一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: non ...
- 自动化构建工具--gulp的初识和使用
gulp 首先:什么是gulp? gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我 ...
- PHPCMS v9上传图片提示"undefined"的解决办法
把phpcms\modules\attachment\attachments.php中将 if(empty($this->userid)){改成 if(empty($_POST['userid' ...
- reportConfig.xml两种数据源连接的配置方式
在reportConfig.xml配置文件中,我们提供了两种数据源连接的配置方式,分别如下: 1.jndi数据源配置(即:在dataSource中配置) 此配置适用于在j2ee的服务器中配置了j ...
- Android 获取全局Context的技巧
回想这么久以来我们所学的内容,你会发现有很多地方都需要用到Context,弹出Toast的时候需要.启动活动的时候需要.发送广播的时候需要.操作数据库的时候需要.使用通知的时候需要等等等等.或许目前你 ...
- 如何进行 Python性能分析，你才能如鱼得水？
[编者按]本文作者为 Bryan Helmig,主要介绍 Python 应用性能分析的三种进阶方案.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 我们应该忽略一些微小的效率提升,几乎在 9 ...
- 转载：https://blog.csdn.net/qq_22706515/article/details/52595027
https://blog.csdn.net/qq_22706515/article/details/52595027 包含直播,即时通讯. 大平台都有免费版或基础版,对于需求不大的情况比较适合.