yurec
/
virt2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
virt2/api/jquery/plugins/odometer/0.4.6/docs/welcome/index.html

212 lines
16 KiB
HTML
Executable File
Raw Blame History

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 ie9-and-less ie8-and-less ie7-and-less" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 ie9-and-less ie8-and-less ie7-and-less" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 ie9-and-less ie8-and-less" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 ie9-and-less" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Odometer — Transition numbers with ease</title>
<meta name="description" content="Odometer is a Javascript and CSS library for smoothly transitioning numbers. It is free and open source and was developed by HubSpot developers Adam Schwartz (@adamfschwartz) and Zack Bloom (@zackbloom).">
<link rel="icon" href="http://static.hubspot.com/favicon.ico">
<script type="text/javascript" src="//use.typekit.net/jbn8qxr.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<link rel="stylesheet" href="/odometer/themes/odometer-theme-minimal.css" />
<link rel="stylesheet" href="/odometer/themes/odometer-theme-default.css" />
<link rel="stylesheet" href="/odometer/themes/odometer-theme-digital.css" />
<link rel="stylesheet" href="/odometer/themes/odometer-theme-car.css" />
<link rel="stylesheet" href="/odometer/themes/odometer-theme-train-station.css" />
<link rel="stylesheet" href="/odometer/themes/odometer-theme-slot-machine.css" />
<link rel="stylesheet" href="onepage-scroll.css" />
<link rel="stylesheet" href="landing-page.css" />
</head>
<body>
<div class="main">
<div class="section number-section title-number-section">
<div class="number-container">
<div class="odometer-container">
<div class="odometer odometer-theme-minimal odometer-theme-odometer">
<span class="odometer-digit"><span class="odometer-digit-spacer">O</span><span class="odometer-digit-inner"><span class="odometer-ribbon"><span class="odometer-ribbon-inner">
<span class="odometer-value odometer-first-value">&nbsp;</span>
<span class="odometer-value">L</span>
<span class="odometer-value">M</span>
<span class="odometer-value odometer-last-value">O</span>
</span></span></span></span>
<span class="odometer-digit"><span class="odometer-digit-spacer">D</span><span class="odometer-digit-inner"><span class="odometer-ribbon"><span class="odometer-ribbon-inner">
<span class="odometer-value odometer-first-value">&nbsp;</span>
<span class="odometer-value">Z</span>
<span class="odometer-value">A</span>
<span class="odometer-value">B</span>
<span class="odometer-value">C</span>
<span class="odometer-value odometer-last-value">D</span>
</span></span></span></span>
<span class="odometer-digit"><span class="odometer-digit-spacer">O</span><span class="odometer-digit-inner"><span class="odometer-ribbon"><span class="odometer-ribbon-inner">
<span class="odometer-value odometer-first-value">&nbsp;</span>
<span class="odometer-value">I</span>
<span class="odometer-value">J</span>
<span class="odometer-value">K</span>
<span class="odometer-value">L</span>
<span class="odometer-value">M</span>
<span class="odometer-value odometer-last-value">O</span>
</span></span></span></span>
<span class="odometer-digit"><span class="odometer-digit-spacer">M</span><span class="odometer-digit-inner"><span class="odometer-ribbon"><span class="odometer-ribbon-inner">
<span class="odometer-value odometer-first-value">&nbsp;</span>
<span class="odometer-value">G</span>
<span class="odometer-value">H</span>
<span class="odometer-value">I</span>
<span class="odometer-value">J</span>
<span class="odometer-value">K</span>
<span class="odometer-value">L</span>
<span class="odometer-value odometer-last-value">M</span>
</span></span></span></span>
<span class="odometer-digit"><span class="odometer-digit-spacer">E</span><span class="odometer-digit-inner"><span class="odometer-ribbon"><span class="odometer-ribbon-inner">
<span class="odometer-value odometer-first-value">&nbsp;</span>
<span class="odometer-value">Y</span>
<span class="odometer-value">Z</span>
<span class="odometer-value">A</span>
<span class="odometer-value">B</span>
<span class="odometer-value">C</span>
<span class="odometer-value">D</span>
<span class="odometer-value odometer-last-value">E</span>
</span></span></span></span>
<span class="odometer-digit"><span class="odometer-digit-spacer">T</span><span class="odometer-digit-inner"><span class="odometer-ribbon"><span class="odometer-ribbon-inner">
<span class="odometer-value odometer-first-value">&nbsp;</span>
<span class="odometer-value">L</span>
<span class="odometer-value">M</span>
<span class="odometer-value">N</span>
<span class="odometer-value">O</span>
<span class="odometer-value">P</span>
<span class="odometer-value">Q</span>
<span class="odometer-value">R</span>
<span class="odometer-value">S</span>
<span class="odometer-value odometer-last-value">T</span>
</span></span></span></span>
<span class="odometer-digit"><span class="odometer-digit-spacer">E</span><span class="odometer-digit-inner"><span class="odometer-ribbon"><span class="odometer-ribbon-inner">
<span class="odometer-value odometer-first-value">&nbsp;</span>
<span class="odometer-value">V</span>
<span class="odometer-value">W</span>
<span class="odometer-value">X</span>
<span class="odometer-value">Y</span>
<span class="odometer-value">Z</span>
<span class="odometer-value">A</span>
<span class="odometer-value">B</span>
<span class="odometer-value">C</span>
<span class="odometer-value">D</span>
<span class="odometer-value odometer-last-value">E</span>
</span></span></span></span>
<span class="odometer-digit"><span class="odometer-digit-spacer">R</span><span class="odometer-digit-inner"><span class="odometer-ribbon"><span class="odometer-ribbon-inner">
<span class="odometer-value odometer-first-value">&nbsp;</span>
<span class="odometer-value">G</span>
<span class="odometer-value">H</span>
<span class="odometer-value">I</span>
<span class="odometer-value">J</span>
<span class="odometer-value">K</span>
<span class="odometer-value">L</span>
<span class="odometer-value">M</span>
<span class="odometer-value">O</span>
<span class="odometer-value">P</span>
<span class="odometer-value">Q</span>
<span class="odometer-value odometer-last-value">R</span>
</span></span></span></span>
</div>
</div>
<div class="number-description">
Transition numbers with ease<br/>
<a class="button dark-button" href="http://github.hubspot.com/odometer">Docs</a>
<a class="button" href="http://github.com/HubSpot/odometer">★ On Github</a>
</div>
</div>
<div class="down-arrow" title="Scroll down to learn more"></div>
</div>
<div class="after-number-sections"></div>
<div class="section">
<div class="about-section">
<h1>How To Use</h1>
<p>Add the <a href="https://raw.github.com/HubSpot/odometer/v0.4.6/odometer.min.js">js</a> and a <a href="http://github.hubspot.com/odometer/api/themes/">theme file</a> to your page:</p>
<pre class=" language-markup"><code class=" language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>odometer-theme-car.css<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token script"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>odometer.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span></code></pre>
<p>Any element with class name "odometer" will automatically be made into an Odometer! When you want to update the value, simply update it the same way you normally would.</p>
<pre class=" language-javascript"><code class=" language-javascript">element<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token number">123</span><span class="token comment" spellcheck="true"> // Native, or...
</span>$<span class="token punctuation">(</span><span class="token string">'.odometer'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html<span class="token punctuation">(</span></span><span class="token number">123</span><span class="token punctuation">)</span><span class="token comment" spellcheck="true"> // with jQuery</span></code></pre>
<center><a class="button" href="http://github.com/HubSpot/odometer">★ On Github</a></center>
</div>
</div>
<div class="section">
<div class="about-section">
<h1>About</h1>
<p>Odometer was made by <a href="https://twitter.com/adamfschwartz">Adam Schwartz</a> and <a href="https://twitter.com/zackbloom">Zack Bloom</a> of <a href="http://dev.hubspot.com/">HubSpot</a>.</p>
<center><a class="button" href="http://github.com/HubSpot/odometer">★ On Github</a></center>
</div>
</div>
<div class="template section number-section">
<div class="number-container">
<div class="odometer-container"></div>
<a target="_blank" class="number-source">
<div class="number-description"></div><br/>
<div class="number-detail"></div>
</a>
</div>
<div class="down-arrow" title="Scroll down to learn more"></div>
</div>
</div>
<script>odometerOptions = {auto: false};</script>
<script src="/odometer/odometer.js"></script>
<script src="onepage-scroll.js"></script>
<script src="landing-page.js"></script>
<!-- Share -->
<div id="retweet_button" class="social-sharing-wrapper">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://github.hubspot.com/odometer/docs/welcome" data-text="odometer.js - Transition numbers with ease" data-count="horizontal" data-via="HubSpotDev">Tweet</a>
<script>
if (Math.random() >= 0.5)
var recommends = ['hubspotdev', 'zackbloom', 'adamfschwartz'];
else
var recommends = ['hubspotdev', 'adamfschwartz', 'zackbloom'];
var $button = $('.twitter-share-button');
if ($button.length)
$button.data('related', recommends.join(','));
</script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div id="github_stars" class="social-sharing-wrapper">
<iframe src="http://ghbtns.com/github-btn.html?user=HubSpot&amp;repo=odometer&amp;type=watch&amp;count=true&amp;size=small" allowtransparency="true" frameborder="0" scrolling="0" width="200" height="20"></iframe>
</div>
<!-- Start of Async HubSpot Analytics Code -->
<script type="text/javascript">
(function(d,s,i,r) {
if (d.getElementById(i)){return;}
var n=d.createElement(s),e=d.getElementsByTagName(s)[0];
n.id=i;n.src='//js.hubspot.com/analytics/'+(Math.ceil(new Date()/r)*r)+'/51294.js';
e.parentNode.insertBefore(n, e);
})(document,"script","hs-analytics",300000);
</script>
<!-- End of Async HubSpot Analytics Code -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-45159009-1', 'hubspot.com');
ga('send', 'pageview');
</script>
<!-- Force 3d acceleration always and forever :) -->
<div style="-webkit-transform: translateZ(0)"></div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink