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 id="content">  <h2>jTicker Demo  </h2>  <div 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)