点击“点我,去看文章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>