参考网址： 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. 428 Setup MySQL + - 改

    初步认识MySQL 安装 练习增减改 1.什么是数据库软件: 数据库,俗称数据的仓库.方便管理数据的软件(或程序) 市面上数据库软件: Oracle:甲骨文公司产品.当前最流行应用最广泛数据库软件.和 ...

  3. 蓝盾杯writeup

    由于比赛时只给了内网,web题目无法复现,这里就简单写一下misc的部分题目 1.眼花了吗 (默默吐槽居然是来自实验吧的原题) 提示:当眼花的时候会显示两张图,可以想到应该是包含双图的情况 用fore ...

  4. 生活英语读写MOOC-Literature Tutor-有声名著阅读推荐

    生活英语读写MOOC-Literature Tutor-有声名著阅读推荐 1. Alice's Adventures in Wonderland 爱丽丝漫游奇境记 音频与文本下载地址:链接:http: ...

  5. ELK搭建<二>：安装ES插件head

    1.去github下载head,针对ES版本不同,安装方式也不一样, =>在2.x以前版本可以通过插件安装 for Elasticsearch 2.x: sudo elasticsearch/b ...

  6. Integer.valueOf（）与Integer.parseInt（）区别

    Integer.parseInt()和Integer.valueOf()有本质区别,具体如下列: Integer.parseInt()把String   型转换为Int型,  Integer.valu ...

  7. mysql 字符串去掉指定字符

    如:在每一列meeting_persons的现有内容之上,去掉15112319字符串 ','')

  8. vue-cli项目 build后请求本地static文件中的 json数据，路径不对，报错404处理方法

    vue-cli 项目 build  出错点: 1,build生成dist 放在tomcat上 报错,不显示内容  解决办法: config>index.js===>assetsPublic ...

  9. 使用Python批量下载Plus上的Podcast

    Plus是一个介绍数学之美与实际应用的网络杂志,其中包含了数学知识.轶闻趣事.历史典故等许多精彩的内容.该杂志恰好有一个Podcast栏目,提供了不少采访与讲座的mp3音频.于是, 我使用Python ...

  10. python常见排序算法解析

    python——常见排序算法解析   算法是程序员的灵魂. 下面的博文是我整理的感觉还不错的算法实现 原理的理解是最重要的,我会常回来看看,并坚持每天刷leetcode 本篇主要实现九(八)大排序算法 ...