jquery向上无缝滚动第2种写法

时间：5年前阅读：5376

这个效果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,我们将及时处理。

微信扫码关注

更新实时通知

jquery向上无缝滚动第2种写法

网友评论