单击按钮上的页面转换css (右、左、上、下)
单击按钮上的页面转换css (右、左、上、下)
提问于 2021-02-16 17:26:54
我正计划在Wordpress中使用导航箭头(按钮)在页面屏幕的顶部、右侧、底部和左侧创建一个网页。通过单击其中一个按钮，您将得到下一个页面--但是根据您单击的按钮进行页面转换。
简单地说，：用户单击“右箭头”=下一页幻灯片从右/用户点击“向下箭头”=下一页幻灯片从底部.
由于页面可以显示在所有方向上，我单击的按钮应该给出页面必须滑动的方向。我如何通过css实现这一目标？
或者它的作用是相反的？当前页面必须在点击时向右、左、上、下滑动？
我发现了如下内容：https://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/，但在本例中，所有内容都位于一个html文件中。这不是真正的过渡.谢谢
回答 1
Stack Overflow用户
发布于 2021-02-16 20:49:51
$('.btnRight').click(function() {
$('.rightPage').toggleClass("activeRight");
});
$('.btnLeft').click(function() {
$('.leftPage').toggleClass("activeLeft");
});
$('.btnBottom').click(function() {
$('.bottomPage').toggleClass("activeBottom");
});
$('.btnTop').click(function() {
$('.topPage').toggleClass("activeTop");
});.btn {
background-color: lightgray;
border: none;
color: white;
padding: 3px 9px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 2rem;
outline: none;
}
.rightPage
{
height:600px;
position:absolute;
top:0;
right:-100%;
width:100%;
background:green;
transition:all 2s;
text-align:left;
}
.activeRight
{
right:0;
}
.leftPage
{
height:600px;
position:absolute;
top:0;
left:-100%;
width:100%;
background:green;
transition:all 2s;
text-align:left;
}
.activeLeft
{
left:0;
}
.bottomPage
{
height:600px;
position:absolute;
bottom:-100%;
left:0;
width:100%;
background:green;
transition:all 2s;
text-align:left;
}
.activeBottom
{
bottom:0;
}
.topPage
{
height:600px;
position:absolute;
top:-100%;
left:0;
width:100%;
background:green;
transition:all 2s;
text-align:left;
}
.activeTop
{
top:0;
}<body style="width:100%;text-align:center;overflow: hidden;">
<div>
<div class="rightPage">
<button type="button" class="btn btnRight">close</button>
</div>
<div class="leftPage">
<button type="button" class="btn btnLeft">close</button>
</div>
<div class="bottomPage">
<button type="button" class="btn btnBottom">close</button>
</div>
<div class="topPage">
<button type="button" class="btn btnTop">close</button>
</div>
</div>
<button type="button" class="btn btnRight">Show Right</button>
<button type="button" class="btn btnLeft">Show Left</button>
<button type="button" class="btn btnBottom">Show Bottom</button>
<button type="button" class="btn btnTop">Show Top</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66229226
复制相关文章
相似问题
腾讯云开发者
