css3和js模擬翻頁效果程式碼例項

antzone發表於2017-04-13
CSSS3JS

本章節分享一段程式碼例項，它模擬實現了翻頁效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#container {
  width: 500px;
  height: 500px;
  margin: 20px auto;
  background: #ff0000;
  -moz-transition: background 2s,width 2s,height 2s;
  -o-transition: background 2s,width 2s,height 2s;
  transition: background 2s,width 2s,height 2s;
}
#container:hover {
  background: #00ff00;
  width: 200px;
  height: 200px;
}
#my3dspace {
  -webkit-perspective: 800;
  -webkit-perspective-origin: 50% 50%;
  overflow: hidden;
}
#pagegroup {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  -webkit-transform-style: preserve-3d;
  position: relative;
}
.page {
  width: 360px;
  height: 360px;
  padding: 20px;
  background-color: black;
  color: white;
  font-size: 360px;
  font-weight: blod;
  line-height: 360px;
  text-align: center;
  position: absolute;
}
#page1 {
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transition: -webkit-transform 1s linear;
  transition: transform 1s linear;
}
#page2, #page3, #page4, #page5, #page6 {
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transition: -webkit-transform 1s linear;
  transition: transform 1s linear;
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}
#op {
  text-align: center;
  margin: 40px auto;
}
</style>
</head>
<body>
<div id="my3dspace">
  <div id="pagegroup">
    <div class="page" id="page1">1</div>
    <div class="page" id="page2">2</div>
    <div class="page" id="page3">3</div>
    <div class="page" id="page4">4</div>
    <div class="page" id="page5">5</div>
    <div class="page" id="page6">6</div>
  </div>
</div>
<div id="op">
  <a href="javascript:next()">next</a> 
  <a href="javascript:prev()">prev</a>
</div>
<script type="text/javascript">
var curIndex = 1;
function next() {
  if (curIndex == 6)
    return;
  var curPage = document.getElementById("page" + curIndex);
  curPage.style.webkitTransform = "rotateX(90deg)";
  curPage.style.transform = "rotateX(90deg)";
  curIndex++;
  var nextPage = document.getElementById("page" + curIndex);
  nextPage.style.webkitTransform = "rotateX(0deg)";
  nextPage.style.transform = "rotateX(0deg)";
}
function prev() {
  if (curIndex == 1)
    return;
  var curPage = document.getElementById("page" + curIndex);
  curPage.style.webkitTransform = "rotateX(-90deg)";
  curPage.style.transform = "rotateX(-90deg)";
  curIndex--;
  var prevPage = document.getElementById("page" + curIndex);
  prevPage.style.webkitTransform = "rotateX(0deg)";
  prevPage.style.transform = "rotateX(0deg)";
}
</script>
</body>
</html>

相關文章