参考网址： 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. 查看变更（git diff）

    git diff命令 如果想要知道变更的具体内容,可以使用git diff命令.它被用来解决两个问题: 哪些变更还没有被暂存? 那些已暂存的变更正待提价? git diff在git status基础上 ...

  2. 【摘】Oracle 11g EM安全证书问题无法访问的解决办法

    本文摘自:http://www.cnblogs.com/wenlong/p/5255673.html  感谢攻城师10946无私分享 OS: Windows7 x64 Oracle: 11g R2 x ...

  3. OSL

    1,SimpleColorShader: shader gamma(color cin = color(,,),output color Cout=color(,,)) { Cout = cin; } ...

  4. 【转】Python3—UnicodeEncodeError 'ascii' codec can't encode characters in position 0-1

    转自:https://blog.csdn.net/AckClinkz/article/details/78538462 环境 >>> import sys >>> ...

  5. appniu踩坑

    1.pyCharm识别不到appnium-python-client 解决:新建项目注意选择环境,查看Project Interpreter中是否识别到了appnium-python-client 还 ...

  6. 微信小程序开发学习（一）

    一.各种JSON配置 1.小程序配置app.json 为小程序全局配置,包括所有页面路径.界面表现.网络超时时间.底部tab等,类比APP开发中manifest配置. 2.工具配置project.co ...

  7. SQLAlchemy使用(三)搭配Flask框架使用

    前言 本章应该是SQLAlchemy使用系列的最后一篇了,本章简单讲一下如何搭配Flask使用.下一篇应该是写Flask_restful相关内容了 正文 我们简单使用前两章的model,两张表 # - ...

  8. vue搭建app, M端项目流程

    思路:安装sass预处理嵌套css,flex布局,flexible手机淘宝适配和fastclick移动300s延迟 打开cmd,使用命令行 1.切换盘符:e: 2.使用vue建立一个项目,具体请看我的 ...

  9. java 常用工具类

    1. org.apache.commons.collections4包提供CollectionUtils.MapUtils.ListUtils.SetUtils等工具类: 2. org.apache. ...

  10. 4.2 Oracle Dataguard failover 操作步骤

    在11g里面,Oracle认为最理想的情况是,虽然Oracle数据库不能打开,但是可以启动到 mount状态.Mount状态之所以重要,就在于如果可以到这个阶段,控制文件control_file就可以 ...