参考网址： 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. iTOP-iMX6UL开发板【全能版】-动态调频技术简介

    本文档以 iMX6UL 为例,简单介绍 cpufreq 的 5 种模式. 在 imx6ul 的 menuconfig 中,进入 CPU Power Management ---> CPU Fre ...

  2. vmware虚拟机磁盘挂载

    执行mount命令时找不到介质或者mount:no medium found的解决办法 使用vmware时,在虚拟机设置里,设置CD/DVD为系统镜像,挂载时,有时会有找不到介质或者no medium ...

  3. VS发布网站时，报错提示：“未能将文件xxx复制到xxx，未能找到文件xx”三种解决方案！

    发布网站时候大家可能会遇到这样的情况,就是报错提示说:“未能将文件xxx复制到xxx,未能找到文件xx”,这个问题一般来说有三种解决方案,个人倾向第三种,如图: 解决方案如下: 方案一.把系统提示缺失 ...

  4. HttpClient的巨坑

    之前做项目的时候,调用api都是使用的HttpWebRequest 最近一个项目改用HttpClient,用了之后,感觉很坑. 1.高并发情况下,造成tcp连接占用的端口无法释放(时间为2MSL,此时 ...

  5. 「luogu2569」[ZJOI2006] 书架

    「luogu2569」[ZJOI2006]书架 题目大意 给定一个长度为 \(n\) 序列,序列中第 \(i\) 个元素有编号 \(a_i(a_i \in \Z \cap [1,n])\),需要支持五 ...

  6. MVC 前端页面ViewData参数名不区分大小写

    项目中实际应用: 后台赋值时传的是:ViewData["CheckedSystemMenu"], 前台取值时:ViewData["checkedsystemmenu&qu ...

  7. 网络流板子/费用流板子 2018南京I题+2016青岛G题

    2018南京I题: dinic,链式前向星,数组队列,当前弧优化,不memset全部数组,抛弃满流点,bfs只找一条增广路,每次多路增广 #include <bits/stdc++.h> ...

  8. Gitlab_ansible_jenkins三剑客⑤jenkins Pipeline-job的使用

    Pipeline-job的使用 创建Pipeline任务 找到root用户的id 编写pipeline脚本 #!groovy pipeline{ agent {node {label 'master' ...

  9. springboot接口返回封装与异常控制

    首先,返回有两个状态,status和code status标识response的状态,有2个值:0成功,-1服务错误. code跟业务有关,可以有各种数值,99999服务未知异常,10000参数异常, ...

  10. [Linux]信号集和sigprocmask信号屏蔽函数

    一.概述 系统提供这样一种能力,就是创建一个信号集,然后传递给信号屏蔽函数,从而屏蔽向该进程发送的信号. 有一点需要注意的是,不能屏蔽SIGKILL和SIGSTOP信号. 信号集是sigset_t类型 ...