<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery字体变形插件Circletype - 网页模板</title>
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div class="container">
<h1 class="puffy" id="title">CircleType.js</h1>
<h2 class="strong">Demos</h2>
<h3 class="puffy">Basic Arc</h3>
<p>Here’s your basic arc, meh.</p>
<div class="demo-box" id="demo-box1">
<h2 id="demo1" class="demo strong">Here is some type on a simple arc.</h2>
</div>
<code><h2 id="demo1">Here is some type on a simple arc.</h2>
$('#demo1').circleType({radius: 384});
</code>
<h3 class="puffy" id="reverse">Reversed Arc</h3>
<p>By setting dir to -1, the text will flow counter-clockwise instead.</p>
<div class="demo-box" id="demo-box2">
<h2 id="demo2" class="demo strong">Here is the same arc but this time reversed.</h2>
</div>
<code><h2 id="demo2">Here is the same arc but this time reversed.</h2>
$('#demo2').circleType({radius: 384, dir:-1});
</code>
<h3 class="puffy" id="auto">Auto Radius</h3>
<p>By leaving the radius empty, CircleType.js will find the perfect radius so the text makes a complete rotation.</p>
<div class="demo-box" id="demo-box3">
<h2 id="demo3" class="demo strong">This text makes a complete rotation no matter how long it is. </h2>
</div>
<code><h2 id="demo3">This text makes a complete rotation no matter how long it is. </h2>
$('#demo3').circleType();
</code>
<h3 class="puffy" id="fluid">Fluid</h3>
<p>The fluid setting gives the type a flexible radius (try resizing your window)</p>
<div class="demo-box" id="demo-box4">
<h2 id="demo4" class="demo strong">This arc shrinks and expands to fit inside its container. </h2>
</div>
<code><h2 id="demo4">This arc shrinks and expands to fit inside its container. </h2>
$('#demo4').circleType({fluid:true});
</code>
<h3 class="puffy" id="fitText">Using FitText.js</h3>
<p>Here’s how you can use <a href="http://www.moobnn.com" target="_blank">FitText.js</a> to make the text a bit more flexible (try resizing your window)</p>
<div class="demo-box" id="demo-box5">
<h2 id="demo5" class="demo strong">I play well with FitText.js too! </h2>
</div>
<code><h2 id="demo5">I play well with FitText.js too! </h2>
$('#demo5').circleType({fitText:true, radius: 180});
</code>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/circletype.js"></script>
<script>
$('#title').circleType({radius: 400, fluid: true});
$('#demo1').circleType({radius: 384});
$('#demo2').circleType({radius: 384, dir:-1});
$('#demo3').circleType();
$('#demo4').circleType({fluid:true});
$('#demo5').circleType({fitText:true, radius: 180})
</script>
<div style="text-align:center;clear:both">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、世界之窗。</p>
<p>来源:<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>