標籤：clist san log false scl isp javascrip over 技術分享
看到網上有那種標籤雲認為蠻炫的,想自己玩玩
/**
* 雲標籤
*
* @author xuyw
* @email [email protected]
* @date 2014-05-27
*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style type="text/css">body{ font-family:"微軟雅黑", Arial, sans-serif;} #main{border:none; background:none;}body,ul,li,h1,h2,h3,p,form{margin:0;padding:0;}body{background:#fbfbfb;color:#444;font-size:14px;}a{color:#444;text-decoration:none;}a:hover{color:red;}/* tagscloud */#yuntags{width:250px;height:260px;position:relative;font-size:12px;color:#333;margin:20px auto 0;text-align:center;}#yuntags a{position:absolute;top:0px;left:0px;color:#333;font-family:Arial;text-decoration:none;margin:0 10px 15px 0;line-height:18px;text-align:center;font-size:12px;padding:1px 5px;display:inline-block;border-radius:3px;}#yuntags a.tagc1{background:#666;color:#fff;}#yuntags a.tagc2{background:#F16E50;color:#fff;}#yuntags a.tagc5{background:#006633;color:#fff;}#yuntags a:hover{color:#fff;background:#0099ff;}</style></head><body><div id="yuntags"><a href="http://image.baidu.com/channel/star?ref=search#all&&null&0" class="tagc1">明星</a><a href="http://user.qzone.qq.com/714115852/infocenter?ptsig=2dvj7jyA7IlnfX-otKXPfswTUrcHMBBP3BEdhR9g3GU_" class="tagc2">帥哥</a><a href="http://www.java.com/zh_CN/" class="tagc5">JAVA</a><a href="http://user.qzone.qq.com/714115852/infocenter?ptsig=2dvj7jyA7IlnfX-otKXPfswTUrcHMBBP3BEdhR9g3GU_" class="tagc2">xuyw<a><a href="http://www.baidu.com/" class="tagc2">銀行利率</a><a href="http://www.baidu.com/" class="tagc1">PHP</a><a href="http://www.baidu.com/" class="tagc2">android</a><a href="http://www.baidu.com/" class="tagc5">C</a><a href="http://www.baidu.com/" class="tagc2">C#</a><a href="http://www.baidu.com/" class="tagc2">ORACLE</a><a href="http://www.baidu.com/" class="tagc5">Mysql</a><a href="http://www.baidu.com/" class="tagc2">銀行貸款利率表</a><a href="http://www.baidu.com/" class="tagc1">銀行存款利率</a><a href="http://www.baidu.com/" class="tagc2">銀行利率</a><a href="http://www.baidu.com/" class="tagc5">銀行貸款利率</a><a href="http://www.baidu.com/" class="tagc2">銀行存款利率<a><a href="http://www.baidu.com/" class="tagc2">銀行利率</a><a href="http://www.baidu.com/" class="tagc1">VB</a><a href="http://www.baidu.com/" class="tagc2">銀行存款利率</a><a href="http://www.baidu.com/" class="tagc5">銀行貸款利率</a><a href="http://www.baidu.com/" class="tagc2">銀行利率</a><a href="http://www.baidu.com/" class="tagc2">房貸利率2013</a><a href="http://www.baidu.com/" class="tagc5">銀行存款利率表</a><a href="http://www.baidu.com/" class="tagc2">銀行貸款利率表</a></div><script src='tag.js' type="text/javascript"></script></body></html>
var radius = 90;var d = 200;var dtr = Math.PI / 180;var mcList = [];var lasta = 1;var lastb = 1;var distr = true;var tspeed = 11;var size = 200;var mouseX = 0;var mouseY = 10;var howElliptical = 1;var aA = null;var oDiv = null;window.onload=function (){var i=0;var oTag=null;oDiv=document.getElementById('yuntags');aA=oDiv.getElementsByTagName('a');for(i=0;i<aA.length;i++){oTag={};aA[i].onmouseover = (function (obj) {return function () {obj.on = true;this.style.zIndex = 9999;this.style.color = '#fff';this.style.padding = '5px 5px';this.style.filter = "alpha(opacity=100)";this.style.opacity = 1;}})(oTag)aA[i].onmouseout = (function (obj) {return function () {obj.on = false;this.style.zIndex = obj.zIndex;this.style.color = '#fff';this.style.padding = '5px';this.style.filter = "alpha(opacity=" + 100 * obj.alpha + ")";this.style.opacity = obj.alpha;this.style.zIndex = obj.zIndex;}})(oTag)oTag.offsetWidth = aA[i].offsetWidth;oTag.offsetHeight = aA[i].offsetHeight;mcList.push(oTag);}sineCosine( 0,0,0 );positionAll();(function () { update(); setTimeout(arguments.callee, 40); })();};function update(){var a, b, c = 0; a = (Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed; b = (-Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed; lasta = a; lastb = b; if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) { return; } sineCosine(a, b, c); for (var i = 0; i < mcList.length; i++) { if (mcList[i].on) { continue; } var rx1 = mcList[i].cx; var ry1 = mcList[i].cy * ca + mcList[i].cz * (-sa); var rz1 = mcList[i].cy * sa + mcList[i].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[i].cx = rx3; mcList[i].cy = ry3; mcList[i].cz = rz3; per = d / (d + rz3); mcList[i].x = (howElliptical * rx3 * per) - (howElliptical * 2); mcList[i].y = ry3 * per; mcList[i].scale = per; var alpha = per; alpha = (alpha - 0.6) * (10 / 6); mcList[i].alpha = alpha * alpha * alpha - 0.2; mcList[i].zIndex = Math.ceil(100 - Math.floor(mcList[i].cz)); } doPosition();}function positionAll(){var phi = 0; var theta = 0; var max = mcList.length; for (var i = 0; i < max; i++) { if (distr) { phi = Math.acos(-1 + (2 * (i + 1) - 1) / max); theta = Math.sqrt(max * Math.PI) * phi; } else { phi = Math.random() * (Math.PI); theta = Math.random() * (2 * Math.PI); } //座標變換 mcList[i].cx = radius * Math.cos(theta) * Math.sin(phi); mcList[i].cy = radius * Math.sin(theta) * Math.sin(phi); mcList[i].cz = radius * Math.cos(phi); aA[i].style.left = mcList[i].cx + oDiv.offsetWidth / 2 - mcList[i].offsetWidth / 2 + 'px'; aA[i].style.top = mcList[i].cy + oDiv.offsetHeight / 2 - mcList[i].offsetHeight / 2 + 'px'; }}function doPosition(){var l = oDiv.offsetWidth / 2; var t = oDiv.offsetHeight / 2; for (var i = 0; i < mcList.length; i++) { if (mcList[i].on) { continue; } var aAs = aA[i].style; if (mcList[i].alpha > 0.1) { if (aAs.display != '') aAs.display = ''; } else { if (aAs.display != 'none') aAs.display = 'none'; continue; } aAs.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px'; aAs.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px'; //aAs.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px'; //aAs.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+100*mcList[i].alpha+")"; aAs.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")"; aAs.zIndex = mcList[i].zIndex; aAs.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);}
Js 標籤雲
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
