javascript - 想在jquery中实现单面翻书动画

Question

一般来说，翻书动画都是从书的中心开始翻页。但是我们有一个客户要求，页面应该像封面一样从左侧而不是从中心翻转。每次我们更改页面时，它都会翻转并隐藏到左侧。请建议任何满足要求的图书馆。

我给了一个样本供引用。

function clickFUnctionality() {
  if (document.getElementById("page-flip").className == "active") {
    document.getElementById("page-flip").classList.remove("active");

  } else {
    document.getElementById("page-flip").className = "active";

  }
}

body {
  padding: 0;
  margin: 0;
}

#all {
  width: 680px;
  margin-left: auto;
  margin-right: auto;
}

#page-flip {
  position: absolute;
  padding: 40px 40px 40px 0;
  width: 300px;
  height: 400px;
  overflow: hidden;
}

#r1 {
  position: absolute;
  z-index: 2;
  -webkit-transform-origin: 1315px 500px;
  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
}

#p1 {
  width: 1285px;
  height: 1388px;
  overflow: hidden;
}

#p1>div {
  -webkit-transform-origin: 285px 0;
  -webkit-transform: translate(1030px, 500px) rotate(32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  width: 285px;
  height: 388px;
  background-image: url(http://cssdeck.com/uploads/media/items/8/87WOlJH.jpg);
}

#p1>div>div {
  width: 10px;
  height: 388px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0, 0, 0, 0)));
}

#p2>div {
  width: 285px;
  height: 388px;
  -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
  position: absolute;
  z-index: 1;
  background-image: url(http://cssdeck.com/uploads/media/items/4/4FpEEbu.jpg);
}

#r3 {
  -webkit-transform-origin: 1315px 500px;
  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  position: absolute;
  z-index: 2;
}

#s3 {
  -webkit-transform-origin: 70px 500px;
  -webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  position: absolute;
  z-index: 1;
}

#page-flip.active #s3 {
  -webkit-transform-origin: 325px 500px;
  -webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
}

#sp3 {
  width: 25px;
  height: 1000px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0, 0, 0, 0)));
  -webkit-transition-property: width;
  -webkit-transition-duration: 1s;
  overflow: hidden;
}

#page-flip.active #sp3 {
  width: 11px
}

.s {
  width: 285px;
  height: 388px;
  position: absolute;
  overflow: hidden;
  z-index: 3;
}

#s2 {
  -webkit-transform-origin: 45px 500px;
  -webkit-transform: translate(240px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  position: absolute;
}

#sp2 {
  width: 15px;
  height: 1000px;
  background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .18)), to(rgba(0, 0, 0, 0)));
  overflow: hidden;
}

#s4 {
  opacity: 1;
  -webkit-transition-duration: 0.5s;
}

#page-flip.active #s4 {
  opacity: 0
}

#page-flip.active #s2 {
  -webkit-transform-origin: 300px 500px;
  -webkit-transform: translate(-15px, -500px) rotate(0deg);
}

#p3 {
  width: 1285px;
  height: 1388px;
  overflow: hidden;
}

#p3>div {
  -webkit-transform-origin: 0 0;
  -webkit-transform: translate(1255px, 500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
  width: 285px;
  height: 388px;
  background-image: url(http://cssdeck.com/uploads/media/items/6/6S8oF28.jpg);
  overflow: hidden;
}

#p3>div>div {
  width: 9px;
  height: 500px;
  float: right;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .20)));
}

#page-flip.active #r1 {
  -webkit-transform-origin: 1570px 500px;
  -webkit-transform: translate(-1285px, -500px) rotate(0deg);
}

#page-flip.active #p1>div {
  -webkit-transform-origin: 285px 0;
  -webkit-transform: translate(1285px, 500px) rotate(0deg);
}

#page-flip.active #r3 {
  -webkit-transform-origin: 1570px 500px;
  -webkit-transform: translate(-1285px, -500px) rotate(0deg);
}

#page-flip.active #p3>div {
  -webkit-transform-origin: 0 0;
  -webkit-transform: translate(1000px, 500px) rotate(0deg);
}

a {
  display: block;
  position: absolute;
  margin: -20000px 0 0 0;
  padding: 1px;
  z-index: 3;
  -webkit-transition-property: margin;
  -webkit-transition-duration: 0.01s;
}

#coke {
  width: 253px;
  height: 158px;
}

a:hover {
  padding: 0;
  border: 1px dotted #92C7C1;
}

#page-flip.active #coke {
  -webkit-transition-delay: .8s;
  margin: 33px 0 0 14px;
}

#meninas {
  width: 253px;
  height: 167px;
}

#page-flip.active #meninas {
  -webkit-transition-delay: .8s;
  margin: 203px 0 0 14px;
}

<div id="all">
  <div id="page-flip">
    <div id="r1">
      <div id="p1">
        <div>
          <div></div>
        </div>
      </div>
    </div>
    <div id="p2">
      <div></div>
    </div>
    <div id="r3">
      <div id="p3">
        <div>
          <div></div>
        </div>
      </div>
    </div>
    <div class="s">
      <div id="s3">
        <div id="sp3"></div>
      </div>
    </div>
    <div class="s" id="s4">
      <div id="s2">
        <div id="sp2"></div>
      </div>
    </div>
    <a id="coke" href="#" title="Pure CSS Coke Can"></a>
    <a id="meninas" href="#" title="CSS 3D Meninas"></a>
  </div>
</div>
text
<button onclick="clickFUnctionality()">Change state</button>

Answer 1

我找到了这个插件:http://www.jquery.info/scripts/jFlip/demo.html

我认为它可能接近您要查找的内容。希望对您有所帮助。

$("#g1").jFlip(300,300,{background:"green",cornersTop:true,scale:"fill"});

#g1 li img{
width:60px;
}

<script src="http://www.jquery.info/scripts/jFlip/jquery-1.2.6.min.js"></script>
<script src="http://www.jquery.info/scripts/jFlip/jquery.jflip-0.4.js"></script>
<ul id="g1">
  <li>
    <img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" />
  </li>
  <li>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" />
  </li>
  <li>
    <img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" />
  </li>
  <li>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" />
  </li>
  <li>
    <img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" />
  </li>
  <li>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" />
  </li> 
</ul>