参考网址： http://yanshi.sucaihuo.com/jquery/22/2226/demo/

里面有详细的解释

下面是案例效果demo，其中jquery.running.css与jquery.running.min.js文件下载地址：https://pan.baidu.com/s/1ZnygQuFE5kLUKLuDaROAcA

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>jquery.running.js</title>

	<link rel="stylesheet" href="css/comment/jquery.running.css">

    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

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

	<style>

	</style>

<script>

	$(function () {

		$('body').running();

	});

</script>

</head>

<body>

	<div class="item selected">

            <div class="text">

            	<h2>数字跑动场景</h2>

                <div class="attr">

                	<dl>

                    	<dd class="d1">

                        	<h4>目标额</h4>

                            <h3><span class="animateNum" data-animatetype="num" data-animatetarget="999.9">999.9</span>万</h3>

                        </dd>

                    	<dd class="d2">

                        	<h4>已完成</h4>

                            <h3><span class="animateNum" data-animatetarget="30">30</span>%</h3>

                        </dd>

                    	<dd class="d3">

                        	<h4>已认投</h4>

                            <h3><span class="animateNum" data-animatetarget="999.9">999.9</span>万</h3>

                        </dd>

                  </dl>

                </div>

            </div>

        </div>

        <div class="pie animatePie" data-animatetarget="89">

           <div class="pieLeft">

             <div class="pieLeftInner"></div>

           </div>

           <div class="pieRight">

             <div class="pieRightInner"></div>

           </div>

           <div class="pieInner"><span>89</span>%</div>

        </div>

</body>

</html>

　　运行效果

注意：

jquery.running.min.js中有滚轮事件，因此，运行时必须滚动滚轮，效果才能显示

jqurey.running.min.js运动的字体效果的更多相关文章

  1. js运动缓动效果

    http://www.cnblogs.com/hongru/archive/2012/03/16/2394332.html  转分享地址

  2. 利用jquery.fullPage.js 和 scrolloverflow.min.js 实现滚屏效果

    参考链接:https://blog.csdn.net/c11073138/article/details/79631036 /* 按着思路去search. */

  3. animate.css配合wow.min.js实现各种页面滚动效果

    有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...

  4. Bootstrap导航点击菜单跳转与点击缩放菜单折叠按钮缓冲效果插件jquery.singlePageNav.min.js

    引入步骤: <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></scrip ...

  5. jquery.fly.min.js 拋物插件

    插件官方: https://github.com/amibug/fly, 官方例子: http://codepen.io/hzxs1990225/full/ogLaVp 首先加载jQuery.js和j ...

  6. javascript总结47: JS动画原理&jQuery 效果- 各种动画

    1 动画的原理就是: 盒子本身的位置+步长 2 什么是步长? var box=document.getElementById('box'); btn.onclick = function() { // ...

  7. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  8. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

  9. jquery.validate.min.js 用法方法示例

    页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

随机推荐

  1. flex弹性盒子的使用

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! CSS3引入了一种新的布局模型—— flex 布局.flex是 flexible box 的缩写,一般称之 ...

  2. luogu P5323 [BJOI2019]光线

    传送门 先考虑\(n=1\)的情况不是输入数据都告诉你了吗 然后考虑\(n=2\),可以光线是在弹来弹去的废话,然后射出去的光线是个等比数列求和的形式,也就是\(x_1\sum_{i=1}^{\inf ...

  3. 深度学习与NLP简单应用

    在深度学习中,文本分类的主要原型:Text  label,坐边是输入端“X”,右边是输出端“Y”.行业baseline:用BoW(bag of words)表示sentences(如何将文本表达成一 ...

  4. 安装版本( 相关关系 Vue SSR 指定版本)

    1. 关于 brew mac包管理器 终端安装 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebr ...

  5. redhat7初始化yum源

    1.卸载原有的yum [app@localhost ~]$ su - root Password: Last :: CST on pts/ [root@localhost ~]# cd /etc/yu ...

  6. 【转】Beginning Game Programming v2.0

    Beginning Game Programming v2.0 Last Updated 8/19/18 Greetings everyone, welcome to the ground up re ...

  7. 012_TCP keepalive 和 http keep-alive

    TCP keepalive概念在使用TCP长连接(复用已建立TCP连接)的场景下,需要对TCP连接进行保活,避免被网关干掉连接.在应用层,可以通过定时发送心跳包的方式实现.而Linux已提供的TCP ...

  8. phpredis扩展实现LBS距离计算和范围筛选

    来源 public function geo(){ $redis = new \redis(); $redis -> connect('127.0.0.1',6379); //位置增加 $res ...

  9. iframe 加form提交数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 处理H5新标签方法

    语义化 HTML5中加入了更加具有语义化的标签,比如header,nav,footer等,可以为搜索引擎优化,让爬虫能更好地理解网页结构. 但是对于新标签的兼容性不是很好,IE9以下旧版本不支持新的语 ...