APP之公告向上轮播

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_41014370/article/details/79172624
<!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>

展开阅读全文

没有更多推荐了,返回首页