手机端简单js点击实现上滑弹框的原生app效果

最新推荐文章于 2024-06-22 16:34:28 发布

会加速的蜗牛

最新推荐文章于 2024-06-22 16:34:28 发布

阅读量1k

点赞数 2

分类专栏： javaScript 前端文章标签： js 移动端上滑弹框

本文链接：https://blog.csdn.net/qq_23244029/article/details/93646445

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

javaScript

8 篇文章 0 订阅

订阅专栏

这个反正我也不知道怎么起名字，首先上效果图哈哈哈

嗯，就是这么简单的一个东西哈哈。下面上代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>用户中心</title>
	<style>
		.test {
			width: 6.5714rem;
			height: 2.1429rem;
			line-height: 2.1429rem;
			margin: 0 auto;
			text-align: center;
			border: 0.0714rem solid gray;
			border-radius: 1rem;
		}
		.show {
			width: 85vw;
			height: 70vh;
			border: 0.0714rem solid lightgray;
			border-radius: 1rem;
			padding: 1rem 0.5rem;
			position: fixed;
			left: 1.15rem;
			bottom: -32rem;
			text-indent: 2rem;
			transition: bottom 1s ease;
			background-color: lightblue;
		}
	</style>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

</head>
<body>
	<div class="test">
		test
	</div>
	<div class="show">
		hello world
	</div>

	<script>
		$('.test').click(() => {
			$('.show')[0].style.cssText = 'bottom: -1rem; '
		});
		$('.show').click(() => {
			$('.show')[0].style.cssText = 'bottom: -32rem;'
		});
	</script>
</body>
</html>

还是老样子，取关键代码：