请教一个css3翻页问题。

开源上海 发布于 2020/05/09 16:33
阅读 151
收藏 0

【开源中国 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);
    }
});

 

 

加载中
0
GinKo
GinKo

CSS3 Transform 引起的 z-index "失效"

https://segmentfault.com/q/1010000002480824

OSCHINA
登录后可查看更多优质内容
返回顶部
顶部