最新消息:

第5款插件:jTicker.js以逐字滚动新闻形式显示内容插件

高级页面 杨红伟 3427浏览 0评论

说明:jTicker是以滚动新闻的形式逐字显示文本内容,用打字机的效果一个个打印显示出来。可以显示一大段文字,用于希望用户特别关注的文本。提供jQuery事件控制。
官方链接: http://webdev.stephband.info/jticker
JS下载: http://www.ijquery.cn/js/jquery.jticker.js
预览: http://www.ijquery.cn/demo/jTicker
打包下载:http://www.ijquery.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 />') //鼠标移上去显示的样式

11

JS引用代码:

<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.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 href="#">next</a>
</div>
<div>
<p>点击「next」链接后,显示下一段内容。</p>
<a href="#">next</a>
</div>
<div>
<p>最后的内容显示完后,再点击「next」链接则返回最开始的一段。</p>
<a href="#">next</a>
</div>
</div>

CSS代码:不用代码,不过也可以在自定义样式!

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址