js原生实现百叶窗上下滚动

最新推荐文章于 2022-12-15 10:29:41 发布

「已注销」

最新推荐文章于 2022-12-15 10:29:41 发布

阅读量1.6k

点赞数

分类专栏：前端开发文章标签： javascript 实例

本文链接：https://blog.csdn.net/wall1999/article/details/77159608

版权

本文展示了如何使用JavaScript实现一个百叶窗上下滚动的效果。通过设置CSS样式和JavaScript函数`startMove`、`getStyle`以及`toShow`，实现了元素的平滑移动，创建了动态的视觉体验。

摘要由CSDN通过智能技术生成

直接上代码

* {
			margin: 0;
			padding: 0;
		}
		#uli {
			width:250px;
			height:auto;
			float:left;
			border-top: 1px solid #000;
			margin:20px;
		}
		li {
			list-style: none;
			width: 100%;
			height: 30px;
			line-height:30px;
			overflow:hidden;
			position:relative;
			border-bottom:1px solid #333;
		}
		li div {
			position:absolute;
			top:-30px;
		}
		li div p {
			height: 30px;
			letter-spacing:5px;
		}

<ul id="uli">
		<li>
			<div>
				<p>111</p>
				<p>222</p>
				<p>aaa</p>
				<p>bbb</p>
			</div>
		</li>
		<li>
			<div>
				<p>333</p>
				<p>444</p>
			</div>
		</li>
		<li>
			<div>
				<p>555</p>
				<p>666</p>
			</div>
		</li>
		<li>
			<div>
				<p>777</p>
				<p>888</p&g