jQuery页面滚动数字增长插件jQuery.Running.js

来源:https://www.sucaihuo.com/js/2335.html 2017-07-06 23:01浏览(1595) 收藏

jQuery.Running.js (奔跑吧,数字!)是一款可以让数字,柱形图,饼形图跑起来的插件,支持滚动条响应。压缩后文件大小仅4k。
jQuery页面滚动数字增长插件jQuery.Running.js
分类:统计图 > 柱状图 难易:初级
查看演示 下载资源 下载积分: 30 积分

页面的head部分需要先加载jQuery.Running.css和docs.css样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/jquery.running.css">
<link type="text/css" rel="stylesheet" href="css/docs.css">

接着调用jQuery类库、jQuery.Running.min.js和docs.js文件,代码如下:

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery.running.min.js"></script>
<script type="text/javascript" src="js/docs.js"></script>

启用插件的方法:$(container).running(); 本例启用插件的代码及绑定页面滚动的代码均写在docs.js里面了,代码如下:

$(function(){
	$('body').running();
	
	$(window).bind("scroll",function(){
		var top=$(window).scrollTop();
		$('.list .item').each(function(){
			if ($(this).offset().top -top< $(window).height() - 200){
				$('.list .item').removeClass('selected');
				$(this).addClass('selected');
			};
		})
	});
})
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2