【开源中国 APP 全新上线】“动弹” 回归、集成大模型对话、畅读技术报告”
请问有大神帮忙看下css3的翻页问题嘛?
为什么翻第2页的时候,会被遮住?
明明z-index是最高了
百思不得其解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5电子书翻页动画效果</title>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/book.js"></script>
</head>
<body>
<style>
*{
padding: 0px;
margin: 0px;
font-size: 16px;
color: #333;
font-family: "Microsoft YaHei";
}
a,a:link,a:visited,a:hover,a:active{
text-decoration: none;
}
::-moz-selection {
background: #338FFF;
color: #fff;
}
::-webkit-selection {
background: #338FFF;
color: #fff;
}
::selection {
background: #338FFF;
color: #fff;
}
.clear::after{
content: "";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.response-img{
display: block;
max-width: 100%;
}
.text-overflow{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body{
width: 100%;
max-width: 1920px;
min-width: 1200px;
background-color: #222222;
}
#knowledge{
width: 100%;
height:100%;
position: relative;
padding: 40px 0;
}
.bookBox{
width: 1000px;
height: 600px;
position: relative;
margin: 30px auto;
-webkit-perspective-origin: 50% 60%;
perspective-origin: 50% 60%;
-webkit-perspective: 1500px;
perspective: 1500px;
background: url(img/bookBg.png) no-repeat 0 0 ;
background-size: 100% 100%;
}
.bookBox:hover .lastBtn{
display: block;
}
.bookBox:hover .nextBtn{
display: block;
}
/*书的高度*/
.bookPage{
position: absolute;
width: 500px;
height: 580px;
top: 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all linear 20s;
-moz-transition: all linear 20s;
-ms-transition: all linear 20s;
-o-transition: all linear 20s;
transition: all linear 20s;
background: url(img/bookLeft.png) no-repeat;
background-size: 479.26px 780px;
background-position: 20.74px 8.3px;
}
.bookPage img{
position: absolute;
top: 50px;
left: 50px;
display: inline-block;
width: 400px;
}
.bookWord{
position: absolute;
top: 50px;
left: 50px;
display: inline-block;
width: 360px;
padding: 20px;
font-size: 20px;
line-height: 27px;
backface-visibility: visible;
background-color: #f0f0f0;word-break:break-all;
-webkit-column-count: 2;
-webkit-column-gap: 40px;
-moz-column-count: 2;
-moz-column-gap: 40px;
-ms-column-count: 2;
-ms-column-gap: 40px;
column-count: 2;
column-gap: 40px;
}
.bookWord span{
font-size: 30px;
font-weight: 600;
line-height: 40px;
}
.frist{
left: 0;
z-index: 1;
}
.frist img{
z-index: 1;
}
.last{
right: 0;
z-index: 1;
}
.last p{
z-index: 1;
}
.runPage{
right: 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
/*书的高度*/
.runPage,
.bookPage:last-child
{
background: url(img/bookRight.png) no-repeat;
background-size: 479.26px 780px;
background-position: 0 8.3px;
}
.runClass{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.lastBtn,
.nextBtn
{
display: none;
position: absolute;
top: 300px;
cursor: pointer;
z-index: 999;
font-size: 50px;
line-height: 100px;
color: #fff;
text-decoration: none;
background-color: rgba(0,0,0,.5);
}
.lastBtn{
left: 0;
}
.nextBtn{
right: 0;
}
.canvasBox{
display: block;
width: 158px;
height: 158px;
}
/*页序号*/
.pageNumber{
position: absolute;
bottom: -40px;
right: 0;
font-size: 20px!important;
line-height: 30px;
}
</style>
<section id="knowledge" class="viewBlock">
<div class="bookBox">
<a class="lastBtn"><</a>
<a class="nextBtn">></a>
<div class="bookPage frist">
<img src="img/dataImg1.png" />
</div>
<div class="bookPage runPage" _id="wo">
<div class="bookWord" >
<span>我</span> red in the glacier.
<span class="pageNumber">1</span>
</div>
<img src="img/dataImg2.png" />
</div>
<div class="bookPage runPage" _id="shi">
<div class="bookWord" >
<span>是</span> water supply, the .
<span class="pageNumber">2</span>
</div>
<img src="img/dataImg3.png" />
</div>
<div class="bookPage runPage" _id="zhong">
<div class="bookWord" >
<span>中</span>itions, good .
<span class="pageNumber">3</span>
</div>
<img src="img/dataImg4.png" />
</div>
<div class="bookPage runPage" _id="guo">
<div class="bookWord" >
<span>国</span>itions, good .
<span class="pageNumber">4</span>
</div>
<img src="img/dataImg5.png" />
</div>
<div class="bookPage runPage" _id="ren">
<div class="bookWord" >
<span>人</span>itions, good .
<span class="pageNumber">5</span>
</div>
<img src="img/dataImg6.png" />
</div>
<div class="bookPage last">
<div class="bookWord">
<span>呀</span>nts for only 2%.</span>
<span class="pageNumber">6</span>
</div>
</div>
</div>
</section>
</body>
</html>
js文件内容
$(function(){
var cur_pageNum = 0;//当前第几页
var countPage=$('.runPage').length;//总页数
var jianGe=5;//间隔值
var maxZindex=1;
for (var i = 0; i <countPage; i++) {
$('.runPage').eq(i).css('z-index',(countPage-i)*jianGe);
$('.runPage').eq(i).children('div').css('z-index',(countPage-i)*jianGe);
$('.runPage').eq(i).children('img').css('z-index',(countPage-i)*jianGe);
};
maxZindex=countPage*jianGe;
$('.nextBtn').bind('click',function(){
if (cur_pageNum <countPage ) {
runNext(cur_pageNum);
cur_pageNum++;
};
});
function runNext(index){
//第index个元素进行翻页
//zIndexNext(index,$('.runPage').eq(index));
maxZindex=maxZindex+jianGe;
//$('.runPage').eq(index).css('z-index',maxZindex);
$('.runPage').eq(index).get(0).style.zIndex=maxZindex;
//$('.runPage').eq(index).children('div').css('z-index',maxZindex+2);
$('.runPage').eq(index).children('div').get(0).style.zIndex=(maxZindex+1);
//$('.runPage').eq(index).children('img').css('z-index',maxZindex+1);
$('.runPage').eq(index).children('img').get(0).style.zIndex=(maxZindex+2);
$('.runPage').eq(index).addClass('runClass');
setTimeout(function(){
},10);
}
$('.lastBtn').bind('click',function(){
if (cur_pageNum >= 1 ) {
cur_pageNum--;
runLast(cur_pageNum);
};
});
function runLast(index){
maxZindex=maxZindex+jianGe;
//$('.runPage').eq(index).css('z-index',maxZindex);
$('.runPage').eq(index).get(0).style.zIndex=maxZindex;
$('.runPage').eq(index).removeClass('runClass');
setTimeout(function(){
$('.runPage').eq(index).children('div').css('z-index',maxZindex);
$('.runPage').eq(index).children('img').css('z-index',maxZindex);
},10);
}
});
CSS3 Transform 引起的 z-index "失效"
https://segmentfault.com/q/1010000002480824