直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现文字逐条向上滚动特效</title>
<style>
*{ margin:0; padding:0; list-style:none;}
#FontScroll{width:100%;height:120px;line-height:30px;border:1px solid green;overflow:Hidden;padding:5px 0;margin:0px auto;}
#FontScroll .line{text-align:center;width:100%;}
#FontScroll .fontColor a{color:red;}
</style>
</head>
<body>
<!-- 代码部分 begin -->
<div id="FontScroll">
<ul>
<li><a href="http://www.lanrenzhijia.com">懒人之家</a></li>
<li><a href=‘http://www.lanrenzhijia.com/flash/‘ >Flash素材</a></li>
<li><a href=‘http://www.lanrenzhijia.com/nav/‘ >菜单导航</a></li>
<li><a href=‘http://www.lanrenzhijia.com/time/‘ >时间日期</a></li>
<li><a href=‘http://www.lanrenzhijia.com/banner/‘ >焦点图</a></li>
</ul>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
(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);
$(‘#FontScroll‘).FontScroll({time: 2000,num: 1});
</script>
<!-- 代码部分 end -->
</body>
</html>
时间： 2024-08-03 16:44:58