APP之公告向上轮播

最新推荐文章于 2024-07-10 10:20:38 发布

夜空下的微笑

最新推荐文章于 2024-07-10 10:20:38 发布

阅读量762

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery

本文链接：https://blog.youkuaiyun.com/weixin_41014370/article/details/79172624

Jquery 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用纯CSS实现的滑动列表效果，通过设置列表项的样式及动画来达到平滑滚动的效果。文章详细展示了如何定义列表项的布局、颜色、过渡动画，并通过JavaScript实现了列表项的自动循环滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

	<head>
		<title></title>
		<style type="text/css">
			.slide-title {
				background: rgba(0, 0, 0, .5);
				color: #fff;
				height: 34px;
				line-height: 34px;
				padding: 0 10px;
				font-size: 12px;
				font-weight: bold;
			}
			
			.slide-title span {
				float: left;
				margin-right: 14px;
			}
			
			.slide-title span:nth-child(1),
			.slide-list li span:nth-child(1) {
				width: 60px;
			}
			
			.slide-title span:nth-child(2),
			.slide-list li span:nth-child(2) {
				width: 90px;
			}
			
			.slide-title span:nth-child(3),
			.slide-list li span:nth-child(3) {
				width: 90px;
				margin-right: 0px;
			}
			
			.slide-container {
				position: relative;
				overflow: hidden;
				height: 90px;
				overflow: hidden;
			}
			
			.slide-list {
				position: absolute;
				width: 100%;
				left: 0;
				top: 0;
				color: #000;
				margin: 0;
				padding: 0;
				height: 30px;
			}
			
			.slide-list li {
				height: 30px;
				line-height: 30px;
				list-style: none;
				margin: 0;
				padding: 0 10px;
			}
			
			.slide-list li span {
				display: inline-block;
				margin-right: 14px;
				font-size: 12px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.slide-list li.odd {
				background: rgba(51, 79, 109, .3);
			}
			
			.slide-list li.even {
				background: rgba(51, 79, 109, .1);
			}
		</style>
	</head>

	<body>
		<div class="slide-title">
			<span>title1</span>
			<span>title2</span>
			<span>title3</span>
		</div>
		<div class="slide-container">
			<!--css设置时，注意高度是显示多少个item,如：item的高度是30px，显示3个，高度则是 3*30 = 90px -->
			<ul class="slide-list js-slide-list">
				<li class="odd"><span>item1</span><span>item1</span><span>item1</span></li>
				<li class="even"><span>item2</span><span>item2</span><span>item2</span></li>
				<li class="even"><span>item2</span><span>item2</span><span>item2</span></li>
			</ul>
		</div>
		<script src="js/jquery.min.js"></script>

		<script>
			var doscroll = function () {
				var $parent = $( '.js-slide-list' );
				var $first = $parent.find( 'li:first' );
				var height = $first.height();
				$first.animate( {
					marginTop: -height + 'px'
				}, 500, function () {
					$first.css( 'marginTop', 0 )
						.appendTo( $parent );
				} );
			};
			setInterval( function () {
				doscroll()
			}, 2000 );
		</script>

	</body>

</html>