javascript 3D旋轉滾動效果

admin發表於2017-04-09
原文網址 : https://www.softwhy.com/article-6436-1.html
JavaScript3D

本章節分享一段程式碼例項，它使用javascript實現了3D滾動效果。

由於裡面涉及到不少的數學知識，這裡就不介紹了，其實就從本身javascript知識來講並不困難。

感興趣的朋友可以做一下參考，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
#show{
  position:relative;
  margin:20px auto;
  width:800px;
  border:1px solid #999999;
}
.item{
  position:absolute;
  height:40px;
  width:60px;
  background:#999999;
  border:1px solid #eeeeee;
  cursor:pointer;
}
</style>
<script>
  var len;
  var showerObj;
  var listObj;
  var showerWidth = 800;
  var showerHeight = 400;
  var r;
  var cR = 0;
  var ccR = 0;
  var timer = 0;
  window.onload = function () {
    showerObj = document.getElementById("show");
    listObj = showerObj.getElementsByTagName("div");
    len = listObj.length;
    r = Math.PI / 180 * 360 / len;
    for (var i = 0; i < len; i++) {
      var item = listObj[i];
      item.style.top = showerHeight / 2 + Math.sin(r * i) * showerWidth / 2 - 20 + "px";
      item.style.left = showerWidth / 2 + Math.cos(r * i) * showerWidth / 2 - 30 + "px";
      item.rotate = (r * i + 2 * Math.PI) % (2 * Math.PI);
      item.onclick = function () {
        cR = Math.PI / 2 - this.rotate;
        timer || (timer = setInterval(rotate, 10));
      }
    }
    var rX = showerObj.offsetLeft + showerWidth / 2;
    var ry = showerObj.offsetTop + showerHeight / 2;
    var rotate = function () {
      ccR = (ccR + 2 * Math.PI) % (2 * Math.PI);
      if (cR - ccR < 0) cR = cR + 2 * Math.PI;
      if (cR - ccR < Math.PI) {
        ccR = ccR + (cR - ccR) / 19;
      } else {
        ccR = ccR - (2 * Math.PI + ccR - cR) / 19;
      }
      if (Math.abs((cR + 2 * Math.PI) % (2 * Math.PI) - (ccR + 2 * Math.PI) % (2 * Math.PI)) < Math.PI / 720) {
        ccR = cR;
        clearInterval(timer);
        timer = 0;
      }
      for (var i = 0; i < len; i++) {
        var item = listObj[i];
        var w, h;
        var sinR = Math.sin(r * i + ccR);
        var cosR = Math.cos(r * i + ccR);
        w = 60 + 0.6 * 60 * sinR;
        h = (40 + 0.6 * 40 * sinR);
        item.style.cssText += ";width:" + w + "px;height:" + h + "px;top:" + parseInt(showerHeight / 2 + sinR * showerWidth / 2 / 3 - w / 2) + "px;left:" + parseInt(showerWidth / 2 + cosR * showerWidth / 2 - h / 2) + "px;z-index:" + parseInt(showerHeight / 2 + sinR * showerWidth / 2 / 3 - w / 2) + ";";
      }
    }
    document.getElementById("l").onclick = function () {
      cR = (cR + r + 2 * Math.PI) % (2 * Math.PI);
      timer || (timer = setInterval(rotate, 10));
    }
    document.getElementById("r").onclick = function () {
      cR = (cR - r + 2 * Math.PI) % (2 * Math.PI);
      timer || (timer = setInterval(rotate, 10));
    }
    rotate();
  }
</script>
</head>
<body>
<input id="l" type="button" value="left" >
<input id="r" type="button" value="right" >
<div id="show">
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
 <div class="item">4</div>
 <div class="item">5</div>
 <div class="item">6</div>
 <div class="item">7</div>
 <div class="item">8</div>
 <div class="item">9</div>
 <div class="item">0</div>
 <div class="item">a</div>
 <div class="item">b</div>
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
</div>
</body>
</html>

相關文章