点击按钮实现页面滑动展示效果

最新推荐文章于 2024-03-05 13:33:04 发布

原创最新推荐文章于 2024-03-05 13:33:04 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文介绍了一种使用HTML、CSS和jQuery实现的文章页面滑动切换效果。通过设置页面布局和过渡动画，当用户点击按钮时，可以实现在不同文章页面之间的平滑切换，包括向左和向右的滑动效果。

点击“点我，去看文章2”，会出现文章2页面模板向左滑动效果
在这里插入图片描述

点击“点我，去看文章1”，会出现文章1页面模板向右滑动效果
在这里插入图片描述

<style type="text/css">
	#wrapper{
			width: 100%;
			overflow: hidden;
		}
		.articleCon{
			width: 200%;
			display: flex;
		}
		.article1,
		.article2{
			width: 100%;
			height: 400px;
		}
		.article1{
			background: blue;
		}
		.article2{
			background: cyan;
		}
</style>

<div id="wrapper">
	<div class="articleCon">
		<div class="article1">
			<button type="button" id="viewArticle2">展示文章2</button>
			<div>
				hello，我是文章1
			</div>
		</div>
		<div class="article2">
			<button type="button" id="viewArticle1">展示文章1</button>
			<div>
				hello，我是文章2
			</div>
		</div>
	</div>
</div>

<script src="./assets/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$("#viewArticle2").click(function(){
		$(".articleCon").css({
			"margin-left":"-100%",
			"transition":"all 2s"
		})
	})
	$("#viewArticle1").click(function(){
		$(".articleCon").css({
			"margin-left":"0%",
			"transition":"all 2s"
		})
	})
</script>