javascript元素3D旋轉效果程式碼例項
本章節分享一段程式碼例項,它實現了元素的3D旋轉效果。
裡面涉及到一些數學相關的東西,感興趣的朋友可以自行進行一下分析。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #show{ position:relative; margin:20px auto; width:800px; } .item{ position:absolute; height:40px; width:60px; background:#999999; border:1px solid #eeeeee; cursor:pointer; } </style> <script type="text/javascript"> 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>
相關文章
- 3D旋轉效果程式碼例項3D
- CSS3旋轉效果程式碼例項CSSS3
- javascript元素迴圈插入效果程式碼例項JavaScript
- javascript元素內容漸現效果程式碼例項JavaScript
- css控制div元素旋轉指定角度程式碼例項CSS
- javascript元素透明度漸變效果程式碼例項JavaScript
- javascript元素滑鼠跟隨效果程式碼例項詳解JavaScript
- javascript 3D旋轉滾動效果JavaScript3D
- css3實現的旋轉魔方效果程式碼例項CSSS3
- CSS3實現的3D旋轉程式碼例項CSSS33D
- jQuerydiv元素拖動效果程式碼例項jQuery
- JavaScript日曆效果程式碼例項JavaScript
- 滑鼠懸浮div實現旋轉縮放效果程式碼例項
- canvas實現的旋轉的太極圖效果程式碼例項Canvas
- javascript獲取指定元素父元素程式碼例項JavaScript
- js元素上下移動效果程式碼例項JS
- css多元素水平居中效果程式碼例項CSS
- js元素的震動效果程式碼例項JS
- javascript元素水平運動程式碼例項JavaScript
- javascript動態建立元素程式碼例項JavaScript
- css3實現旋轉的太極圖效果程式碼例項CSSS3
- JavaScript點選投票效果程式碼例項JavaScript
- JavaScript留言板效果程式碼例項JavaScript
- javascript淡入淡出效果程式碼例項JavaScript
- JavaScript 動畫效果簡單例項程式碼JavaScript動畫單例
- JavaScript多級選項卡效果程式碼例項JavaScript
- 設定div元素漸隱效果程式碼例項
- javascript刪除指定子元素程式碼例項JavaScript
- javascript遍歷陣列元素程式碼例項JavaScript陣列
- javascript獲取元素封裝程式碼例項JavaScript封裝
- javascript元素勻速運動程式碼例項JavaScript
- JavaScript刪除元素節點程式碼例項JavaScript
- CSS 3D旋轉效果CSS3D
- javascript實現animate()動畫效果程式碼例項JavaScript動畫
- JavaScript網頁鎖屏效果程式碼例項JavaScript網頁
- js實現的元素抖動效果程式碼例項JS
- css3實現滑鼠懸浮圖示旋轉高亮效果程式碼例項CSSS3
- javascript獲取元素的順序程式碼例項JavaScript