参考网址: 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. 中文 Tex

    \documentclass{article} \usepackage{ctex} \begin{document} 中文English \[E = m c^2\] \end{document} \d ...

  2. Windows10安装Debug

    1. 什么是Debug? Debug是DOS.Windows都提供的实模式(8086方式)程序的调试工具. 使用它,可以查看CPU各种寄存器中的内容.内存的情况和在机器码级别跟踪程序的运行. 2. 常 ...

  3. 20175315 《Java程序设计》第6周学习总结

    20175215 <Java程序设计>第6周学习总结 教材学习内容总结 第七章主要讲的是内部类,匿名类,异常类等等. 内部类:Java支持在一个类中定义另一个类,称作内部类,包含内部类的类 ...

  4. Android运行时权限

    Android 6.0加入了运行时权限这一概念.对于危险权限,应用必须在使用的时候进行申请.可以使用命令行查看危险权限:adb shell pm list permissions -d -g CALE ...

  5. iOS(12) ANCS链接问题(用Android 9.0设备链接)

    由于iOS系统默认不会为自带的ANCS服务发送广播, 并且使用ANCS的通知订阅功能必须进行配对. 所以我们需要在ios上写自己的代码,让目标设备和iOS进行配对. 配对完成后,监听设备和iOS都可以 ...

  6. 初识C语言(五)

    自定义函数 C语言提供了大量的库函数(右侧资料下载中有),比如stdio.h提供输出函数,但是还是满足不了我们开发中的一些逻辑,所以这个时候需要自己定义函数,自定义函数的一般形式: 注意: 1.[]包 ...

  7. mycat+mysql集群:实现读写分离,分库分表

    1.mycat文档:https://github.com/MyCATApache/Mycat-doc       官方网站:http://www.mycat.org.cn/ 2.mycat的优点: 配 ...

  8. ORACLE安装报错解决

    今天在虚拟机中安装了一个WINDOWS系统,用于安装oracle服务器:从安装到使用中出现了很多的问题,把这些问题解决掉,花了不少时间,查了不少的资料. 第一个,我在安装过程中,出现了ORA-0092 ...

  9. 饮冰三年-人工智能-Python-28 企业官网(组合搜索)

    1 2:组合搜索 2.1 创建model类 from django.db import models class Direction(models.Model): """ ...

  10. C#中判断DataReader是否为空的代码

    下面的内容是关于C#中判断DataReader是否为空的内容. if(DataReader.HasRows){}