用jquery怎样做文字滚动的效果
导读：在实际案例的操作过程中，我们可能会遇到“用jquery怎样做文字滚动的效果”这样的问题，那么我们该如何处理和解决这样的情况呢？这篇小编就给大家总结了一些方法，具有一定的借鉴价值，希望对大家有所帮助，接下来就让小编带领大家一起了解看看吧。...
在实际案例的操作过程中，我们可能会遇到“用jquery怎样做文字滚动的效果”这样的问题，那么我们该如何处理和解决这样的情况呢？这篇小编就给大家总结了一些方法，具有一定的借鉴价值，希望对大家有所帮助，接下来就让小编带领大家一起了解看看吧。实现文字上下滚动是经常用到的js效果，这里介绍一种上下渐隐渐出的文字展现效果！
!DOCTYPE>
head>
meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
title>
文字滚动/title>
style type="text/css">
#sidebar{
width:200px;
height;
500px;
overflow:hidden;
margin:0 auto;
background:#f00;
color:#fff;
}
#marquee{
width:200px;
margin:0;
padding:0;
}
#marquee li{
width:200px;
height:20px;
line-height:20px;
}
ul li{
list-style:none;
}
/style>
/head>
body>
div id="sidebar">
ul id="marquee" class="marquee spy">
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>
script type="text/javascript" src="js/jquery.min.js">
/script>
script type="text/javascript">
$(function () {
$('ul.spy').simpleSpy();
}
);
(function ($) {
$.fn.simpleSpy = function (limit, interval) {
limit = limit || 12;
//展示数量
interval = interval || 4000;
return this.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('div class="spyWrapper" />
').parent().css({
height : height * limit }
);
$list.find('>
li').filter(':gt(' + (limit - 1) + ')').remove();
function spy() {
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怎样做文字滚动的效果”的介绍了，感谢各位的阅读，希望文本对大家有所帮助。如果想要了解更多知识，欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 用jquery怎样做文字滚动的效果
本文地址： https://pptw.com/jishu/655113.html