Jquery文字特效

 

Jquery文字特效,点击可以查看大图
需      要: 0.0 金币
折      扣: 100 (% 折)
 
相关搜索: Jquery 文字 特效 
下载次数: 6
支持一下(1)
100.00%
踩一下(0)
0.00%
  • 下载等级:
  • 编  号: 20120601163027
  • 浏览器兼容IE7.0,IE8.0,IE9.0,Firefox9.0及以前,Firefox10.0,Chrome17.0及以前,Chrome18.0
  • 更新日期: 2012-06-01
  • 大  小: 182.77K
  • 浏览次量: 2208
  • 开发者链接: 官网  演示
  • 相  关: 违规举报
  • 收  藏:( 0 人收藏) 加入收藏
  • 此内容校验人员: sinacomcn
分享到:   
pengbinhai  
 上士 上传于/2012-06-01 16:35:41
零星会员   
   

<!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>

 购买记录
miladhamzelo
新兵
cping1210
新兵
rg0606
新兵
刘涛_90
新兵
plutothe
新兵
whotext
新兵
会员评论:  

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

  验证码:
 
反馈请帮助我们提高!意见反馈