javascript 3D旋转滚动效果
分类:实例代码
本章节分享一段代码实例,它使用javascript实现了3D滚动效果。
由于里面涉及到不少的数学知识,这里就不介绍了,其实就从本身javascript知识来讲并不困难。
感兴趣的朋友可以做一下参考,代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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>