期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

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

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

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册