内容滚动效果

最新推荐文章于 2023-08-16 15:59:41 发布

qq_33645229

最新推荐文章于 2023-08-16 15:59:41 发布

阅读量383

点赞数

本文链接：https://blog.csdn.net/qq_33645229/article/details/79912681

版权

HTML部分

<div class="biao">
			<p class="qy" style="color: goldenrod;">最新签约商家</p>
			<ul class="js-slide-list">
				<li class="ds">
					<p class="qy" style="color: #fff;">***旗舰店2018-03-19</p>
					<p class="qy" style="color: #fff;">***旗舰店2018-03-19</p>
					<p class="qy" style="color: #fff;">***旗舰店2018-03-19</p>
				</li>
				<li class="ds">
					<p class="qy" style="color: #fff;">***旗舰店2018-03-18</p>
					<p class="qy" style="color: #fff;">***旗舰店2018-03-18</p>
					<p class="qy" style="color: #fff;">***旗舰店2018-03-18</p>
				</li>
				<li class="ds">
					<p class="qy" style="color: #fff;">***旗舰店2018-03-17</p>
					<p class="qy" style="color: #fff;">***旗舰店2018-03-17</p>
					<p class="qy" style="color: #fff;">***旗舰店2018-03-17</p>
				</li>
			</ul>
			
		</div>

css部分

.js-slide-list{
	overflow: hidden;
	width: 60%;
	height: 80px;
}
.ds{
	width: 100%;
	height: 80px;
}
.biao{width: 100%;
	height: 80px;
	background: rgba(0,0,0,0.5);
	position: absolute;
	top:495px;
	left: 0;
	z-index: 9;
	}
.qy{
	width: 25%;
	height: 80px;
	text-align: center;
	line-height: 80px;
	float: left;
}

js部分

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

效果展示