翻书效果

最新推荐文章于 2024-08-03 13:37:33 发布

Marktubbu

最新推荐文章于 2024-08-03 13:37:33 发布

阅读量478

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/Sensation_cyq/article/details/53117187

版权

js 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
  html,body,div,ul,li,p,span {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  html,body {
    height: 100%
  }
  body{
    background-color: #999;
    padding:8px;
  }
  ul{list-style: none;}
  #books{
    display: block;
    width:980px;
    height:100%;
    margin:auto;
    position: relative;
    counter-reset:page;
  }
  #books li{
    position: absolute;
    top:0;
    width: 50%;
    height: 100%;
    background-color: #fff;
    transition-duration: 0.5s;
    transition-property: transform,opacity;
    transform-style: preserve-3d;
    box-shadow:0px 0px 12px #000;
  }

  #books li:nth-child(odd){
    left:50%;
    transform:rotateY(0deg);
    transform-origin:0 50% 0;
    opacity: 1;
  }
  #books li:nth-child(even){
    left:0;
    background: linear-gradient(90deg, #fff 92%, #eee 99%, #ccc 100%);
    transform:rotateY(180deg);
    transform-origin:100% 50% 0;
    opacity: 0;
  }
  #books li.rl:nth-child(odd){
    transform:rotateY(180deg);
    opacity: 0;
  }
  #books li.rl:nth-child(even){
    transform:rotateY(0deg);
    opacity: 1;
  }
  #books li:nth-child(odd)::before{
    right:0;
  }
  #books li:nth-child(even)::before{
    left:0;
  }
  #books li:before{
    content: counter(page);
    counter-increment: page;
    position: absolute;
    font:12px/1em "宋体";
    padding: 18px;
    bottom:0;
  }
  #books li:after{
    content:"";
    bottom:0;
    position: absolute;
    width:0;
    height:0;
    box-shadow:-1px -1px 12px #e0e0e0;
    transition-duration: 0.3s;
    transition-property: width,height;
  }
  #books li:nth-child(odd)::after{
    right:0;
    background: linear-gradient(-45deg, transparent 50%, #eee 50%, #fff 90%);
  }
  #books li:nth-child(even)::after{
    left:0;
    background: linear-gradient(45deg, transparent 50%, #eee 50%, #fff 90%);
  }
  #books li:hover::after{
    width:30px;
    height:30px;
  }
</style>
<body>

<ul id="books">
  <li><p style="font-size: 300px; text-align: center;">1</p></li>
  <li><p style="font-size: 300px; text-align: center;">2</p></li>
  <li><p style="font-size: 300px; text-align: center;">3</p></li>
  <li><p style="font-size: 300px; text-align: center;">4</p></li>
  <li><p style="font-size: 300px; text-align: center;">5</p></li>
  <li><p style="font-size: 300px; text-align: center;">6</p></li>
  <li><p style="font-size: 300px; text-align: center;">7</p></li>
  <li><p style="font-size: 300px; text-align: center;">8</p></li>
  <li><p style="font-size: 300px; text-align: center;">9</p></li>
  <li><p style="font-size: 300px; text-align: center;">10</p></li>
  <li><p style="font-size: 300px; text-align: center;">11</p></li>
  <li><p style="font-size: 300px; text-align: center;">12</p></li>
</ul>
<script type="text/javascript">
  $(function(){
    var page = $("#books li").length;
  $("#books li").each(function(index,item){
    $(this).css("z-index", page - index);
  });
  $("#books li:even").click(function(e){
    $(this).add($(this).next()).addClass("rl");
    var obj = this;
  setTimeout(function(){
    $(obj).add($(obj).next()).css("z-index","auto");
  },500)
  })
  $("#books li:odd").click(function(e){
    $(this).prev().css("z-index",page-$(this).index()+1);
    $(this).css("z-index",page-$(this).index());
    $(this).add($(this).prev()).removeClass("rl");
  })
  });
</script>
</body>
</html>