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