如何使用jquery实现文字上下滚动效果
实现文字上下滚动是经常用到的js效果，这里介绍一种上下渐隐渐出的文字展现效果！
<!DOCTYPE>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>文字滚动</title>
<styletype="text/css">
#sidebar{width:200px;height;500px;overflow:hidden;margin:0auto;background:#f00;color:#fff;}
#marquee{width:200px;margin:0;padding:0;}
#marqueeli{width:200px;height:20px;line-height:20px;}
ulli{list-style:none;}
</style>
</head>
<body>
<divid="sidebar">
<ulid="marquee"class="marqueespy">
<li>11111111111111111111111111111</li>
<li>22222222222222222222222222222</li>
<li>33333333333333333333333333333</li>
<li>44444444444444444444444444444</li>
<li>55555555555555555555555555555</li>
<li>asdsdssssssssssssssssssdddddd</li>
<li>ggggggggggggggggggggggggggggg</li>
<li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
<li>11111111111111111111111111111</li>
<li>22222222222222222222222222222</li>
<li>33333333333333333333333333333</li>
<li>44444444444444444444444444444</li>
<li>55555555555555555555555555555</li>
<li>asdsdssssssssssssssssssdddddd</li>
<li>ggggggggggggggggggggggggggggg</li>
<li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
</ul>
</div>
</body>
</html>
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript">
$(function(){
$('ul.spy').simpleSpy();
});
(function($){
$.fn.simpleSpy=function(limit,interval){
limit=limit||12;//展示数量
interval=interval||4000;
returnthis.each(function(){
var$list=$(this),
items=[],
currentItem=limit,
total=0,
height=$list.find('>li:first').height();
$list.find('>li').each(function(){
items.push('<li>'+$(this).html()+'</li>');
});
total=items.length;
$list.wrap('<divclass="spyWrapper"/>').parent().css({height:height*limit});
$list.find('>li').filter(':gt('+(limit-1)+')').remove();
functionspy(){
var$insert=$(items[currentItem]).css({
height:0,
opacity:0,
display:'none'
}).prependTo($list);
$list.find('>li:last').animate({opacity:0},1000,function(){
$insert.animate({height:height},1000).animate({opacity:1},1000);
$(this).remove();
});
currentItem++;
if(currentItem>=total){
currentItem=0;
}
setTimeout(spy,interval)
}
spy();
});
};
})(jQuery);
</script>
希望本文所述对大家学习jquery有所帮助。