文字行向上循环滚动jquery插件特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是文字行向上循环滚动jquery插件特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为文字行向上循环滚动jquery插件，属于站长常用代码" />
<title>文字行向上循环滚动jquery插件</title>
<link rel="stylesheet" type="text/css" href="css/lrtk.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/fontscroll.js"></script>
<script type="text/javascript">
$(function(){
    $('#FontScroll').FontScroll({time: 3000,num: 1});
});
</script>
</head>
<body><br /><br />
<!-- 代码 开始 -->
<div id="FontScroll">
    <ul>
        <li><a href="#">第1条</a></li>
        <li><a href="#">第2条</a></li>
        <li><a href="#">第3条</a></li>
        <li><a href="#">第4条</a></li>
        <li><a href="#">第5条</a></li>
        <li><a href="#">第6条</a></li>
        <li><a href="#">第7条</a></li>
        <li><a href="#">第8条</a></li>
        <li><a href="#">第9条</a></li>
    </ul>
</div>
<!-- 代码 结束 -->
</body>
</html>

JS代码(fontscroll.js):

/** +------------------------------------------------------------------- * jQuery FontScroll - ���������Ϲ������ - http://java2.sinaapp.com +------------------------------------------------------------------- * @version 1.0.0 beta * @since 2014.06.12 * @author kongzhim <kongzhim@163.com> <http://java2.sinaapp.com> * @github http://git.oschina.net/kzm/FontScroll +------------------------------------------------------------------- */
(function($){
	$.fn.FontScroll = function(options){
	var d ={
	time:3000,s:'fontColor',num:1}
var o = $.extend(d,options);
	this.children('ul').addClass('line');
	var _con = $('.line').eq(0);
	var _conH = _con.height();
	//�����ܸ߶� var _conChildH = _con.children().eq(0).height();
	//һ�ι����߶� var _temp = _conChildH;
	//��ʱ���� var _time = d.time;
	//������� var _s = d.s;
	//������� _con.clone().insertAfter(_con);
	//��ʼ����¡ //��ʽ���� var num = d.num;
	var _p = this.find('li');
	var allNum = _p.length;
	_p.eq(num).addClass(_s);
	var timeID = setInterval(Up,_time);
	this.hover(function(){
	clearInterval(timeID)}
,function(){
	timeID = setInterval(Up,_time);
}
);
	function Up(){
	_con.animate({
	marginTop:'-'+_conChildH}
);
	//��ʽ���� _p.removeClass(_s);
	num += 1;
	_p.eq(num).addClass(_s);
	if(_conH == _conChildH){
	_con.animate({
	marginTop:'-'+_conChildH}
,"normal",over);
}
else{
	_conChildH += _temp;
}
}
function over(){
	_con.attr("style",'margin-top:0');
	_conChildH = _temp;
	num = 1;
	_p.removeClass(_s);
	_p.eq(num).addClass(_s);
}
}
}
)(jQuery);

CSS代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
body,div,p,ul,table,li{margin:0;padding:0;}
ul li{list-style:none;}
#FontScroll{width:500px;height:90px;line-height:30px;border:1px solid green;overflow:Hidden;padding:5px 0;margin:0 auto;}
#FontScroll .line{text-align:center;width:100%;}
#FontScroll .fontColor a{color:red;}

附件:下载该文件资源,减少时间成本(增值服务)