这是第1种写法，代码里有详细解释：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#xw{
width: 500px;
height: 40px;
margin: 300px auto;
border: 2px solid darkblue;
position: relative;
overflow: hidden;
}
#xw ul{
position: absolute;
top: 0;
left: 0;
}
#xw ul li{
list-style: none;
width: 500px;
height: 40px;
line-height: 40px;
text-align: center;
color: white;
}
</style>
<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// 大总管变量
var t = 0;
// 设置定时器,让ul每隔一秒钟滑动一次
setInterval(function(){
t++;
if (t==7) {
$('#xw ul').css({'top':'0px'});
t=1;
}
// 计算ul应该到达的top值
var y = t*-40;
// 让ul滑动上去
$('#xw ul').animate({'top':y+'px'},500)
},1000)
})
</script>
</head>
<body>
<div id="xw">
<ul>
<li style="background: darkblue;">为什么俄罗斯姑娘结婚后身材迅速发福？涨知识了</li>
<li style="background: darkcyan;">男子在海里泡太久 感觉手臂有东西 上岸后惊到众人</li>
<li style="background: darkgoldenrod;">90后多少存款算合格？ 看了网友们回答不敢说话了</li>
<li style="background: darkgreen;">23岁女子花1万5做腿部吸脂术 半年后腿上全是坑</li>
<li style="background: darkmagenta;">那些老公身价过千万的女人，到底是长什么样的？</li>
<li style="background: red;">穿搭技巧：有时候我们的颜色搭配要比款式更重要！</li>
<li style="background: darkblue;">为什么俄罗斯姑娘结婚后身材迅速发福？涨知识了</li>
</ul>
</div>
</body>
</html>
上面代码效果图（效果图片做得不好，没有向上滚动的效果，实际上代码是有向上滚动效果的）：
原文链接：https://www.qiquanji.com/post/7754.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知