这个效果jquery的基础，也没什么难写的。一直没怎么用到写这种效果，再加上现在用插件也方便，近日突然想在某面页想写一个向上无缝滚动，加一个小小的功能，纯手工写几行代码就行了，随手做一下记录一下,这是我对无缝滚动的理解, 分享给大家，这里只做一个向上无缝滚动的：会向上的，就会向下了！下面开始代码了，最终效果点（代码运行）来看：
<!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: 6px solid darkblue;
position: relative;
/*overflow: hidden;*/
}
#xw ul{
position: absolute;
bottom: -40px;
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(){
setInterval(function(){
// 让第一个li高度变为0
// $('#hd ul li').first().css('heigth',"0px");
// height可以获得现在高度，也可以设置高度 没值()就是获得，(0)有值就是设置
$('#xw ul li').first().height(0);
// 将第一个li追加到ul的最后
$('#xw ul').append($('#xw ul li').first());
//// 让最后一个li高度逐渐变为40
$('#xw ul li').last().animate({'height':'40px'},300);
// 可以一句话写完
// $('#xw ul').append($('#xw ul li').first().height(0).animate({'height':'40px'},300));
},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>
</ul>
</div>
</body>
</html>
效果图：
原文链接：https://www.qiquanji.com/post/7784.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知