参考网址： 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. python时间模块小结

    1.datetime 模块 为日期和时间处理同时提供了简单和复杂的方法.支持日期和时间算法的同时,实现的重点放在更有效的处理和格式化输出.该模块还支持时区处理: 简单例子: from datetime ...

  2. java学习笔记10-方法

    我们经常用到System.out.println(),它到底是什么? System是系统类 out是系统类的标准输出对象 println()是一个方法 也就是说是调用了System类中的标准输出对象o ...

  3. Win 10 系统下研华采集卡Advantech Navi SDK虚拟demo设备安装方法

    研华的DAQNavi是其采集卡设备的.net编程SDK,安装了其通讯工具Navigator后,可以添加虚拟采集卡 demo device. 在Win10上,执行添加操作时,可能会出现添加失败,这是由于 ...

  4. stylus 实践

    音乐分享: Broken Back - <Halcyon Birds> —————————————————————————————————————————————————————————— ...

  5. web开发-前后端分离原理

    前言 前后端分离已成为互联网项目开发的业界标准使用方式,通过Nginx+Tomcat的方式(也可以中间加一个Node.js)有效的进行解耦,并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务 ...

  6. IIS+nginx反向代理 负载均衡

    本文没有过多的讲述,只讲述重点地方.由这两个转自的文章进行中和 1.nginx+iis实现负载均衡(这篇文章主要是有第2篇文章的工具) 2.nginx+iis使用(这篇文章讲得很详细,配置文件直接复制 ...

  7. 关于PCB走线能不能走锐角的讨论

    (此文参考吴川斌的博客) 很多PCB工程师都知道Layout走线时忌走直角,那么锐角能走吗? 回答当然是否定的!为什么呢? 这里先不说锐角对高速信号走线会不会造成负面影响,单从PCB DFM(可制造性 ...

  8. 04-HTTP协议和静态Web服务器

    一.HTTP协议(HyperText Transfer Protocol)     超文本传输协议,超文本是超级文本的缩写,是指超越文本限制或者超链接,比如:图片.音乐.视频.超链接等等都属于超文本. ...

  9. MySQL 笔记（Mysql 8.0.16）

    用户登陆 mysql -u user_name -p 修改密码 ALTER USER 'root'@'localhost' IDENTIFIED BY 'new_password'; 关闭服务 D:\ ...

  10. 1024 Python 要诀

    在medium看到一篇好文,给初学者的Python小技巧,非常实用,可以用在你的程序中,代码瞬间变得高大上,看起来还有Pythonic 的感觉,Talk is cheap show me the co ...