jQuery jTicker 網頁打字機效果演示

2024-09-05 12:21:37

字體：大中小

來源：轉載

供稿：網友

基于jquery.jticker.js以及jQuery共同實現的網頁打字特效，很逼真的打字效果，示例頁面中帶有打字控制，比如可以暫停和繼續打印，當然只是為了演示效果而用的，其它的使用細節請參照實例自己完成吧，測試時別忘了引入這兩個JS庫。

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery實現的超酷打字機效果</title><style type="text/css" media="screen, projection">#ticker{height: 12em; padding: 0.6em 0; margin: 0 0 1.8em 0; border-top:3px solid #efefef; border-bottom:3px solid #efefef; position: relative;}#ticker .cursor{display: inline-block; background: #565c61; width: 0.6em; height: 1em; text-align: center;}#ticker p{margin-bottom: 0.8em;}#ticker code{margin: 0.4em 0.4em; display: block;}#ticker .next{position: absolute; bottom: 1em;}</style><script type="text/javascript" SRC="/ajaxjs/jquery-1.6.2.min.js"></script><script type="text/javascript" SRC="/jscss/demoimg/201310/jquery.jticker.js"></script><script type="text/javascript"></script></head><body><div   class="iwvjtn8m0"   id="content">  <h2>jTicker Demo  </h2>  <div   class="iwvjtn8m0"   id="ticker">    <div>      <h3>What does jTicker do?</h3>        <p>jTicker takes an elements' children and displays them one by one, in sequence, writing their text 'ticker tape' style. It is smart enough to ticker text from an element heirarchy, inserting elements back into the DOM tree as it needs them. That means almost any content can be 'tickered'.</p>        <p>It can be controlled with jQuery events.</p>        next    </div>    <div>      <h3>Not my cup of tea, really, ...</h3>        <p>annoying little blinky things trying to distract attention when you want to get on with the serious business of reading a website, but if it's your thing, here it is.</p>        next    </div>    <div>        <h3>jTicker has some neat features:</h3>        <ul>        	<li>jTicker can be declared on any element, and it respects that element's DOM tree, printing it back out with the same hierarchy.</li>            <li>jTicker handles any number of alternating cursors (or just one).</li>            <li>jTicker's cursor container is styleable using the class .cursor, or can be defined as your own jQuery object</li>            <li>jTicker reacts to jQuery events "play", "stop" and "control". You can try them out below.</li>        </ul>        next    </div>        <div>        <h3>There is one caveat:</h3>        <ul>            <li><span>jTicker can't understand text and children at the same level (I don't know how to do that yet), so if you want some text and then a link, you have to wrap the text in, say, a span, like this:</span>                <code>|span| some text |/span| |a|and then a link|/a|</code>            </li>            <li>But obviously not with those brackets. That's another thing, jTicker is not good at handling html character entities. So make that two caveats.</li>        </ul>        next    </div>  </div>    <h3>Events</h3>  <dl class="events">    <dt>play</dt><dd>plays from the next item. You can also define the item to play.</dd>    <dt>stop</dt><dd>stops tickering at the end of the current item.</dd>    <dt>control</dt><dd>accesses controls like rate.  Ooops, Speed it up again. Or cursor element.</dd>  </dl></div></body></html>

上一篇：文字背景響應鼠標變色

下一篇：上下滾動的文字(Javascript)