1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

jquery新闻标题向上无缝滚动第1种写法

这是第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

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: