我正在使用 JQuery 制作非常基本的动画。基本上我拥有的是一个大小为 60% 宽度、80% 高度的 DIV,它包含一本手册。我的目标是,当您翻阅手册中的页面时,当前页面会向上移动并消失,而下一页会从底部出现。
我已经很接近了,但出了点问题,我不知道如何解决它 - 页面 DIV 在其容器外可见。他们的 top 属性设置为 110% 但我可以看到它没有生效。他们的位置仅受其上方菜单表的影响。
所以我的问题确实是 - 我如何使 DIV 在其容器外不可见,但又不改变整个 DIV 的可见性或显示,以便在向上移动时可以看到文本 - 但只有文本放在容器上而不是在容器外面。
.manualPage {
color:rgba(241, 241, 241,1.0);
top:110%;
text-align:left;
left:0%;
cursor:default;
z-index:30;
font-family: "Open Sans", sans-serif;
font-size:11pt;
width:100%;
height:100%;
}
.BigWindow {
position:absolute;
width:60%;
height:80%;
top:10%;
display:inline-block;
left:-70%;
background-repeat:repeat;
color:rgba(241, 241, 241,1.0);
font-family: "Open Sans", sans-serif;
font-size:12pt;
text-align:center;
cursor:default;
z-index:30;
}
注意 BigWindow 是容器,manualPage 是页面。
这是函数,但我认为 CSS 问题是首先要解决的问题:
var currentPage = -1;
function setManualPage(num) {
if ($('#manualMenu').css('display') != 'none')
$('#manualMenu').fadeOut(750);
if (currentPage != -1) {
$('#page' + currentPage).animate({ top: '-100%' }, screen.availHeight / 2, function () { $('#page' + currentPage).css('top', '110%'); });
}
if (num != -1)
$('#page' + num).animate({ top: '0%' }, screen.availHeight / 2);
currentPage = num;
}
最佳答案
基本上这是通过添加CSS来完成的
overflow: hidden;
到封闭的容器,但没有看到这里的代码,很难获得帮助。
关于jquery - 使 DIV 不显示在其容器外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16999559/