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"> body { background: #24313d; } #tagsList { position: relative; width: 450px; height: 450px; margin: 150px auto 0; } #tagsList a { position: absolute; top: 0px; left: 0px; font-family: Microsoft YaHei; color: #fff; font-weight: bold; text-decoration: none; padding: 3px 6px; } #tagsList a:hover { color: #FF0000; letter-spacing: 2px; } </style> <script> var radius = 120; var dtr = Math.PI / 180; var d = 300; var mcList = []; var active = false; var lasta = 1; var lastb = 1; var distr = true; var tspeed = 10; var size = 250; var mouseX = 0; var mouseY = 0; var howElliptical = 1; var aA = null; var oDiv = null; window.onload = function () { var i = 0; var oTag = null; oDiv = document.getElementById('tagsList'); aA = oDiv.getElementsByTagName('a'); for (i = 0; i < aA.length; i++) { oTag = {}; oTag.offsetWidth = aA[i].offsetWidth; oTag.offsetHeight = aA[i].offsetHeight; mcList.push(oTag); } sineCosine(0, 0, 0); positionAll(); oDiv.onmouseover = function () { active = true; }; oDiv.onmouseout = function () { active = false; }; oDiv.onmousemove = function (ev) { var oEvent = window.event || ev; mouseX = oEvent.clientX - (oDiv.offsetLeft + oDiv.offsetWidth / 2); mouseY = oEvent.clientY - (oDiv.offsetTop + oDiv.offsetHeight / 2); mouseX /= 5; mouseY /= 5; }; setInterval(update, 30); }; function update() { var a; var b; if (active) { a = (-Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed; b = (Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed; } else { a = lasta * 0.98; b = lastb * 0.98; } lasta = a; lastb = b; if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) { return; } var c = 0; sineCosine(a, b, c); for (var j = 0; j < mcList.length; j++) { var rx1 = mcList[j].cx; var ry1 = mcList[j].cy * ca + mcList[j].cz * (-sa); var rz1 = mcList[j].cy * sa + mcList[j].cz * ca; var rx2 = rx1 * cb + rz1 * sb; var ry2 = ry1; var rz2 = rx1 * (-sb) + rz1 * cb; var rx3 = rx2 * cc + ry2 * (-sc); var ry3 = rx2 * sc + ry2 * cc; var rz3 = rz2; mcList[j].cx = rx3; mcList[j].cy = ry3; mcList[j].cz = rz3; per = d / (d + rz3); mcList[j].x = (howElliptical * rx3 * per) - (howElliptical * 2); mcList[j].y = ry3 * per; mcList[j].scale = per; mcList[j].alpha = per; mcList[j].alpha = (mcList[j].alpha - 0.6) * (10 / 6); } doPosition(); depthSort(); } function depthSort() { var i = 0; var aTmp = []; for (i = 0; i < aA.length; i++) { aTmp.push(aA[i]); } aTmp.sort(function (vItem1, vItem2) { if (vItem1.cz > vItem2.cz) { return -1; } else if (vItem1.cz < vItem2.cz) { return 1; } else { return 0; } }); for (i = 0; i < aTmp.length; i++) { aTmp[i].style.zIndex = i; } } function positionAll() { var phi = 0; var theta = 0; var max = mcList.length; var i = 0; var aTmp = []; var oFragment = document.createDocumentFragment(); //隨機排序 for (i = 0; i < aA.length; i++) { aTmp.push(aA[i]); } aTmp.sort(function () { return Math.random() < 0.5 ? 1 : -1; }); for (i = 0; i < aTmp.length; i++) { oFragment.appendChild(aTmp[i]); } oDiv.appendChild(oFragment); for (var i = 1; i < max + 1; i++) { if (distr) { phi = Math.acos(-1 + (2 * i - 1) / max); theta = Math.sqrt(max * Math.PI) * phi; } else { phi = Math.random() * (Math.PI); theta = Math.random() * (2 * Math.PI); } //座標變換 mcList[i - 1].cx = radius * Math.cos(theta) * Math.sin(phi); mcList[i - 1].cy = radius * Math.sin(theta) * Math.sin(phi); mcList[i - 1].cz = radius * Math.cos(phi); aA[i - 1].style.left=mcList[i - 1].cx+oDiv.offsetWidth /2-mcList[i - 1].offsetWidth/2+'px'; aA[i - 1].style.top=mcList[i - 1].cy+oDiv.offsetHeight/2-mcList[i - 1].offsetHeight/2+'px'; } } function doPosition() { var l = oDiv.offsetWidth / 2; var t = oDiv.offsetHeight / 2; for (var i = 0; i < mcList.length; i++) { aA[i].style.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px'; aA[i].style.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px'; aA[i].style.fontSize = Math.ceil(12 * mcList[i].scale / 2) + 8 + 'px'; aA[i].style.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")"; aA[i].style.opacity = mcList[i].alpha; } } function sineCosine(a, b, c) { sa = Math.sin(a * dtr); ca = Math.cos(a * dtr); sb = Math.sin(b * dtr); cb = Math.cos(b * dtr); sc = Math.sin(c * dtr); cc = Math.cos(c * dtr); } </script> </head> <body> <div id="tagsList"> <a href="#/Article.aspx?kid=1" title="星級評分">星級評分</a> <a href="#/Article.aspx?kid=2" title="層特效">層特效</a> <a href="#/Article.aspx?kid=3" title="關鍵字">關鍵字</a> <a href="#/Article.aspx?kid=4" title="拖拽">拖拽</a> <a href="#/Article.aspx?kid=5" title="分頁外掛">分頁外掛</a> <a href="#/Article.aspx?kid=6" title="時間外掛">時間外掛</a> <a href="#/Article.aspx?kid=7" title="彈出層">彈出層</a> <a href="#/Article.aspx?kid=8" title="資料統計">資料統計</a> <a href="#/Article.aspx?kid=9" title="HTML5">HTML5</a> <a href="#/Article.aspx?kid=10" title="置頂特效">置頂特效</a> <a href="#/Article.aspx?kid=11" title="選項卡">選項卡</a> <a href="#/Article.aspx?kid=12" title="導航選單">導航選單</a> <a href="#/Article.aspx?kid=13" title="原創">原創</a> <a href="#/Article.aspx?kid=14" title="動畫外掛">動畫外掛</a> <a href="#/Article.aspx?kid=15" title="實用特效">實用特效</a> <a href="#/Article.aspx?kid=16" title="table外掛">table外掛</a> <a href="#/Article.aspx?kid=17" title="文字特效">文字特效</a> <a href="#/Article.aspx?kid=18" title="圖片特效">圖片特效</a> <a href="#/Article.aspx?kid=19" title="線上客服">線上客服</a> <a href="#/Article.aspx?kid=20" title="瀑布流">瀑布流</a> <a href="#/Article.aspx?kid=21" title="螞蟻部落">softwhy.com</a> </div> </body> </html>
相關文章
- javascript球形標籤雲程式碼例項JavaScript
- javascript使用標籤包裹字串程式碼例項JavaScript字串
- JavaScript <script>標籤JavaScript
- JavaScript動態建立script標籤並執行js程式碼JavaScriptJS
- pbootcms常用標籤程式碼集合boot
- JavaScript 標籤語句JavaScript
- 通過JavaScript獲取標籤,修改標籤內容JavaScript
- JavaScript 模板字面量標籤JavaScript
- jQuery自定義標籤程式碼例項jQuery
- JavaScript各類標籤的使用JavaScript
- JavaScript 動態建立style標籤JavaScript
- JavaScript獲取元素標籤名JavaScript
- <input type="range">標籤用法例項程式碼
- jQuery刪除html標籤程式碼例項jQueryHTML
- JavaScript獲取head標籤物件JavaScript物件
- dd dt dl標籤應用例項程式碼
- html指令碼 標籤與HTML指令碼
- 小程式標籤切換
- javascript實現文字框標籤驗證JavaScript
- javascript刪除字串中的html標籤JavaScript字串HTML
- javascript轉義或者還原html標籤JavaScriptHTML
- javascript元素3D旋轉效果程式碼例項JavaScript3D
- IndexedDB 程式碼封裝、效能摸索以及多標籤支援Index封裝
- vuejs實現新增tag標籤程式碼例項VueJS
- 織夢cms經典SQL呼叫標籤程式碼_dedecmsSQL
- jquery獲取元素的標籤tagName程式碼例項jQuery
- 刪除字串中的html標籤程式碼例項字串HTML
- pbootcms統計程式碼標籤(如何安裝百度統計程式碼)boot
- DEMO6:座標新增文字標籤的JavaScript外掛JavaScript
- properties標籤和typeAliases標籤
- JavaScript 獲取指定標籤一級子元素JavaScript
- JavaScript物件導向修改標籤頁詳解JavaScript物件
- JavaScript html標籤轉義為實體字元JavaScriptHTML字元
- JavaScript如何獲取元素的標籤型別JavaScript型別
- jQuery實現的刪除指定標籤程式碼例項jQuery
- 頁面動態加入<script>標籤並執行程式碼行程
- 易優CMS廣告位標籤-模板程式碼使用說明
- HTML標籤(基本標籤的使用)HTML