说明:jTicker是以滚动新闻的形式逐字显示文本内容,用打字机的效果一个个打印显示出来。可以显示一大段文字,用于希望用户特别关注的文本。提供jQuery事件控制。 官方链接: http://webdev.stephband.info/jticker JS下载: http://ijquery.360sites.cn/js/jquery.jticker.js 预览: http://ijquery.360sites.cn/demo/jTicker 打包下载:http://ijquery.360sites.cn/demo/jTicker/jTicker.zip 参数说明:
- rate: 40, // Speed to print message.译:打印信息的速度,40指的是1/25秒
- delay: 2000, // Pause to read message.译:阅读信息停顿的时间,2000指的是2秒
- cursorList: "_", // A string or an array of strings or jQuery objects. If an array, the cursor loops through the array.译:显示字的后边跟的符号
- cursor: jQuery('<span class="cursor" />') //鼠标移上去显示的样式
复制代码
图片展示: JS引用代码:
- <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery-1.4.2.min.js"></script>
- <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery.jticker.js"></script>
- <script>
- $(function () {
- $('#jticker').ticker({
- cursorList: ' ',
- rate: 40,
- delay: 4000
- }).trigger('play');
-
- $('.next').live('click', function(){
- $('#jticker').trigger({
- type: 'play'
- });
- return false;
- });
- });
- </script>
复制代码
HTML代码:
- <div id="jticker">
- <div>
- <p>滚动新闻的形式显示内容「jTicker」</p>
- <a class="next" href="#">next</a>
- </div>
- <div>
- <p>点击「next」链接后,显示下一段内容。</p>
- <a class="next" href="#">next</a>
- </div>
- <div>
- <p>最后的内容显示完后,再点击「next」链接则返回最开始的一段。</p>
- <a class="next" href="#">next</a>
- </div>
- </div>
复制代码
|