<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>Jquery文字效果 by 25175</title>
<meta name="Design Corp" content="顺通网络" />
<meta name="Author" content="powered by 25175">
<meta name="description" content="Jquery文字效果,25175-你我一起舞-数字化校园"/>
<meta name="Keywords" content="Jquery文字效果" />
<script src="07/ga.js" async="" type="text/javascript"></script>
<script type="text/javascript" src="07/prettify.js"></script>
<script src="07/jquery.js"></script>
<script src="07/textualizer.js"></script>
<link href="07/prettify.css" type="text/css" rel="stylesheet">
<link href="07/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-25301489-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="container">
<h2>25175</h2>
<div style="overflow: hidden;" id="txtlzr">
<div style="position: relative;">
<span style="left: 193px; top: 36.5px; position: absolute;">a</span>
<span style="left: 376px; top: 0.5px; position: absolute;">r</span>
<span style="left: 262px; top: 0.5px; position: absolute;">t</span>
<span style="left: 560px; top: 0.5px; position: absolute;">r</span>
<span style="left: 104px; top: 0.5px; position: absolute;">o</span>
<span style="left: 360px; top: 0.5px; position: absolute;">a</span>
<span style="left: 154px; top: 0.5px; position: absolute;"> </span>
<span style="left: 278px; top: 0.5px; position: absolute;">s</span>
<span style="left: 523px; top: 0.5px; position: absolute;">w</span>
<span style="left: 87px; top: 0.5px; position: absolute;">n</span>
<span style="left: 209px; top: 36.5px; position: absolute;">n</span>
<span style="left: 401px; top: 0.5px; position: absolute;"> </span>
<span style="left: 487px; top: 36.5px; position: absolute;">.</span>
<span style="left: 27px; top: 36.5px; position: absolute;">a</span>
<span style="left: 409px; top: 0.5px; position: absolute;">o</span>
<span style="left: 236px; top: 0.5px; position: absolute;">o</span>
<span style="left: 81px; top: 36.5px; position: absolute;"> </span>
<span style="left: 20px; top: 0.5px; position: absolute;">l</span>
<span style="left: 458px; top: 0.5px; position: absolute;">o</span>
<span style="left: 137px; top: 0.5px; position: absolute;">n</span>
<span style="left: 79px; top: 0.5px; position: absolute;"> </span>
<span style="left: 515px; top: 0.5px; position: absolute;"> </span>
<span style="left: 379px; top: 36.5px; position: absolute;">i</span>
<span style="left: 306px; top: 36.5px; position: absolute;"> </span>
<span style="left: 105px; top: 72.5px; position: absolute;">i</span>
<span style="left: 265px; top: 36.5px; position: absolute;">g</span>
<span style="left: 65px; top: 36.5px; position: absolute;">e</span>
<span style="left: 503px; top: 36.5px; position: absolute;"> </span>
<span style="left: 204px; top: 0.5px; position: absolute;">s</span>
<span style="left: 89px; top: 36.5px; position: absolute;">a</span>
<span style="left: 401px; top: 36.5px; position: absolute;">e</span>
<span style="left: 241px; top: 36.5px; position: absolute;">i</span>
<span style="left: 614px; top: 36.5px; position: absolute;">t</span>
<span style="left: 587px; top: 0.5px; position: absolute;">s</span>
<span style="left: 172px; top: 0.5px; position: absolute;"> </span>
<span style="left: 339px; top: 36.5px; position: absolute;">e</span>
<span style="left: 443px; top: 0.5px; position: absolute;">s</span>
<span style="left: 54px; top: 0.5px; position: absolute;">b</span>
<span style="left: 425px; top: 0.5px; position: absolute;">r</span>
<span style="left: 219px; top: 0.5px; position: absolute;">h</span>
<span style="left: 27px; top: 0.5px; position: absolute;">u</span>
<span style="left: 602px; top: 0.5px; position: absolute;"> </span>
<span style="left: 417px; top: 36.5px; position: absolute;"> </span>
<span style="left: 44px; top: 0.5px; position: absolute;">r</span>
<span style="left: 499px; top: 0.5px; position: absolute;">e</span>
<span style="left: 120px; top: 0.5px; position: absolute;">u</span>
<span style="left: 43px; top: 36.5px; position: absolute;">i</span>
<span style="left: 634px; top: 0.5px; position: absolute;"> </span>
<span style="left: 610px; top: 0.5px; position: absolute;">o</span>
<span style="left: 544px; top: 0.5px; position: absolute;">o</span>
<span style="left: 282px; top: 36.5px; position: absolute;"> </span>
<span style="left: 495px; top: 36.5px; position: absolute;"> </span>
<span style="left: 17px; top: 72.5px; position: absolute;">e</span>
<span style="left: 371px; top: 36.5px; position: absolute;">t</span>
<span style="left: 622px; top: 36.5px; position: absolute;">i</span>
<span style="left: 50px; top: 36.5px; position: absolute;">s</span>
<span style="left: 196px; top: 0.5px; position: absolute;"> </span>
<span style="left: 97px; top: 72.5px; position: absolute;">t</span>
<span style="left: 73px; top: 72.5px; position: absolute;">i</span>
<span style="left: 180px; top: 0.5px; position: absolute;">a</span>
<span style="left: 435px; top: 0.5px; position: absolute;"> </span>
<span style="left: 678px; top: 36.5px; position: absolute;">l</span>
<span style="left: 270px; top: 0.5px; position: absolute;"> </span>
<span style="left: 252px; top: 0.5px; position: absolute;">r</span>
<span style="left: 0px; top: 36.5px; position: absolute;">p</span>
<span style="left: 685px; top: 36.5px; position: absolute;"> </span>
<span style="left: 522px; top: 36.5px; position: absolute;"> </span>
<span style="left: 290px; top: 36.5px; position: absolute;">a</span>
<span style="left: 314px; top: 36.5px; position: absolute;">c</span>
<span style="left: 570px; top: 0.5px; position: absolute;">d</span>
<span style="left: 17px; top: 36.5px; position: absolute;">r</span>
<span style="left: 645px; top: 36.5px; position: absolute;">n</span>
<span style="left: 0px; top: 72.5px; position: absolute;">d</span>
<span style="left: 120px; top: 36.5px; position: absolute;">c</span>
<span style="left: 135px; top: 36.5px; position: absolute;">o</span>
<span style="left: 386px; top: 36.5px; position: absolute;">v</span>
<span style="left: 105px; top: 36.5px; position: absolute;">c</span>
<span style="left: 446px; top: 36.5px; position: absolute;">o</span>
<span style="left: 248px; top: 36.5px; position: absolute;">n</span>
<span style="left: 128px; top: 72.5px; position: absolute;">n</span>
<span style="left: 626px; top: 0.5px; position: absolute;">f</span>
<span style="left: 71px; top: 0.5px; position: absolute;">:</span>
<span style="left: 145px; top: 72.5px; position: absolute;">.</span>
<span style="left: 162px; top: 0.5px; position: absolute;">-</span>
<span style="left: 293px; top: 0.5px; position: absolute;">a</span>
</div>
</div>
<h2>注释:</h2>
<pre class="prettyprint"><span class="pln"> </span><span class="kwd">var</span><span class="pln"> list </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="str">'first blurb'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'second blurb'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'third blurb'</span><span class="pun">];</span><span class="pln"> </span><span class="com">// list of blurbs</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> txt </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#txtlzr'</span><span class="pun">);</span><span class="pln"> </span><span class="com">// The container in which to render the list</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> options </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
duration</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1000</span><span class="pun">,</span><span class="pln"> </span><span class="com">// Time (ms) each blurb will remain on screen</span><span class="pln">
rearrangeDuration</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1000</span><span class="pun">,</span><span class="pln"> </span><span class="com">// Time (ms) a character takes to reach its position</span><span class="pln">
effect</span><span class="pun">:</span><span class="pln"> </span><span class="str">'random'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// Animation effect the characters use to appear</span><span class="pln">
centered</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln"> </span><span class="com">// Centers the text relative to its container</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
txt</span><span class="pun">.</span><span class="pln">textualizer</span><span class="pun">(</span><span class="pln">list</span><span class="pun">,</span><span class="pln"> options</span><span class="pun">);</span><span class="pln"> </span><span class="com">// textualize it!</span><span class="pln">
txt</span><span class="pun">.</span><span class="pln">textualizer</span><span class="pun">(</span><span class="str">'start'</span><span class="pun">);</span><span class="pln"> </span><span class="com">// start</span></pre>
<script>
$(function() {
prettyPrint();
var list = ['Textualizer is a jQuery plug-in that allows you to transition through blurbs of text. Just like this...'
,'When transitioning to a new blurb, any character that is common to the next blurb is kept on the screen, and moved to its new position.'
, 'Textualize: verb - to put into text, set down as concrete and unchanging. Use Textualizer to transition through blurbs of text.'
, 'Blurb: noun - a short summary or some words of praise accompanying a creative work. A promotional description.'];
var txt = $('#txtlzr');
txt.textualizer(list, { duration: 3000 });
txt.textualizer('start');
});
</script>
</div>
</body>
<a href="http://www.25175.com">25175</a>
</html>