知向前端
首页
微语
登录
js和jquery常用3D标签云代码实例总结
2016-2-14 Jon
js常用3D标签云1
<br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>js常用3D标签云1</title><br /> <style type="text/css"><br /> body{ font-family:"微软雅黑", Arial, sans-serif;} #main{border:none; background:none;}<br /> body,ul,li,h1,h2,h3,p,form{margin:0;padding:0;}body{background:#fbfbfb;color:#444;font-size:14px;}<br /> a{color:#444;text-decoration:none;}a:hover{color:red;}<br /> /* tagscloud */<br /> #tagscloud{width:250px;height:260px;position:relative;font-size:12px;color:#333;margin:20px auto 0;text-align:center;}<br /> #tagscloud 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;}<br /> #tagscloud a.tagc1{background:#666;color:#fff;}<br /> #tagscloud a.tagc2{background:#F16E50;color:#fff;}<br /> #tagscloud a.tagc5{background:#006633;color:#fff;}<br /> #tagscloud a:hover{color:#fff;background:#0099ff;}<br /> </style><br /> </head><br /> <body><br /> <div id="tagscloud"><br /> <a href="javascript:;" class="tagc1">银行存款利率</a><br /> <a href="javascript:;" class="tagc2">银行利率</a><br /> <a href="javascript:;" class="tagc5">银行贷款利率</a><br /> <a href="javascript:;" class="tagc2">银行存款利率<a><br /> <a href="javascript:;" class="tagc2">银行利率</a><br /> <a href="javascript:;" class="tagc1">不孕不育</a><br /> <a href="javascript:;" class="tagc2">银行存款利率</a><br /> <a href="javascript:;" class="tagc5">银行贷款利率</a><br /> <a href="javascript:;" class="tagc2">银行利率</a><br /> <a href="javascript:;" class="tagc2">房贷利率2013</a><br /> <a href="javascript:;" class="tagc5">银行存款利率表</a><br /> <a href="javascript:;" class="tagc2">银行贷款利率表</a><br /> <a href="javascript:;" class="tagc1">银行存款利率</a><br /> <a href="javascript:;" class="tagc2">银行利率</a><br /> <a href="javascript:;" class="tagc5">银行贷款利率</a><br /> <a href="javascript:;" class="tagc2">银行存款利率<a><br /> <a href="javascript:;" class="tagc2">银行利率</a><br /> <a href="javascript:;" class="tagc1">不孕不育</a><br /> <a href="javascript:;" class="tagc2">银行存款利率</a><br /> <a href="javascript:;" class="tagc5">银行贷款利率</a><br /> <a href="javascript:;" class="tagc2">银行利率</a><br /> <a href="javascript:;" class="tagc2">房贷利率2013</a><br /> <a href="javascript:;" class="tagc5">银行存款利率表</a><br /> <a href="javascript:;" class="tagc2">银行贷款利率表</a><br /> </div><br /> <!-- tags.js --><br /> <script><br /> var radius = 90;<br /> var d = 200;<br /> var dtr = Math.PI / 180;<br /> var mcList = [];<br /> var lasta = 1;<br /> var lastb = 1;<br /> var distr = true;<br /> var tspeed = 11;<br /> var size = 200;<br /> var mouseX = 0;<br /> var mouseY = 10;<br /> var howElliptical = 1;<br /> var aA = null;<br /> var oDiv = null;<br /> window.onload=function ()<br /> {<br /> var i=0;<br /> var oTag=null;<br /> oDiv=document.getElementById('tagscloud');<br /> aA=oDiv.getElementsByTagName('a');<br /> for(i=0;i<aA.length;i++)<br /> {<br /> oTag={};<br /> aA[i].onmouseover = (function (obj) {<br /> return function () {<br /> obj.on = true;<br /> this.style.zIndex = 9999;<br /> this.style.color = '#fff';<br /> this.style.padding = '5px 5px';<br /> this.style.filter = "alpha(opacity=100)";<br /> this.style.opacity = 1;<br /> }<br /> })(oTag)<br /> aA[i].onmouseout = (function (obj) {<br /> return function () {<br /> obj.on = false;<br /> this.style.zIndex = obj.zIndex;<br /> this.style.color = '#fff';<br /> this.style.padding = '5px';<br /> this.style.filter = "alpha(opacity=" + 100 * obj.alpha + ")";<br /> this.style.opacity = obj.alpha;<br /> this.style.zIndex = obj.zIndex;<br /> }<br /> })(oTag)<br /> oTag.offsetWidth = aA[i].offsetWidth;<br /> oTag.offsetHeight = aA[i].offsetHeight;<br /> mcList.push(oTag);<br /> }<br /> sineCosine( 0,0,0 );<br /> positionAll();<br /> (function () {<br /> update();<br /> setTimeout(arguments.callee, 40);<br /> })();<br /> };<br /> function update()<br /> {<br /> var a, b, c = 0;<br /> a = (Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed;<br /> b = (-Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed;<br /> lasta = a;<br /> lastb = b;<br /> if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {<br /> return;<br /> }<br /> sineCosine(a, b, c);<br /> for (var i = 0; i < mcList.length; i++) {<br /> if (mcList[i].on) {<br /> continue;<br /> }<br /> var rx1 = mcList[i].cx;<br /> var ry1 = mcList[i].cy * ca + mcList[i].cz * (-sa);<br /> var rz1 = mcList[i].cy * sa + mcList[i].cz * ca;<br /> <br /> var rx2 = rx1 * cb + rz1 * sb;<br /> var ry2 = ry1;<br /> var rz2 = rx1 * (-sb) + rz1 * cb;<br /> <br /> var rx3 = rx2 * cc + ry2 * (-sc);<br /> var ry3 = rx2 * sc + ry2 * cc;<br /> var rz3 = rz2;<br /> <br /> mcList[i].cx = rx3;<br /> mcList[i].cy = ry3;<br /> mcList[i].cz = rz3;<br /> <br /> per = d / (d + rz3);<br /> <br /> mcList[i].x = (howElliptical * rx3 * per) - (howElliptical * 2);<br /> mcList[i].y = ry3 * per;<br /> mcList[i].scale = per;<br /> var alpha = per;<br /> alpha = (alpha - 0.6) * (10 / 6);<br /> mcList[i].alpha = alpha * alpha * alpha - 0.2;<br /> mcList[i].zIndex = Math.ceil(100 - Math.floor(mcList[i].cz));<br /> }<br /> doPosition();<br /> }<br /> function positionAll()<br /> {<br /> var phi = 0;<br /> var theta = 0;<br /> var max = mcList.length;<br /> for (var i = 0; i < max; i++) {<br /> if (distr) {<br /> phi = Math.acos(-1 + (2 * (i + 1) - 1) / max);<br /> theta = Math.sqrt(max * Math.PI) * phi;<br /> } else {<br /> phi = Math.random() * (Math.PI);<br /> theta = Math.random() * (2 * Math.PI);<br /> }<br /> //坐标变换<br /> mcList[i].cx = radius * Math.cos(theta) * Math.sin(phi);<br /> mcList[i].cy = radius * Math.sin(theta) * Math.sin(phi);<br /> mcList[i].cz = radius * Math.cos(phi);<br /> <br /> aA[i].style.left = mcList[i].cx + oDiv.offsetWidth / 2 - mcList[i].offsetWidth / 2 + 'px';<br /> aA[i].style.top = mcList[i].cy + oDiv.offsetHeight / 2 - mcList[i].offsetHeight / 2 + 'px';<br /> }<br /> }<br /> function doPosition()<br /> {<br /> var l = oDiv.offsetWidth / 2;<br /> var t = oDiv.offsetHeight / 2;<br /> for (var i = 0; i < mcList.length; i++) {<br /> if (mcList[i].on) {<br /> continue;<br /> }<br /> var aAs = aA[i].style;<br /> if (mcList[i].alpha > 0.1) {<br /> if (aAs.display != '')<br /> aAs.display = '';<br /> } else {<br /> if (aAs.display != 'none')<br /> aAs.display = 'none';<br /> continue;<br /> }<br /> aAs.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px';<br /> aAs.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px';<br /> //aAs.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';<br /> //aAs.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+100*mcList[i].alpha+")";<br /> aAs.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")";<br /> aAs.zIndex = mcList[i].zIndex;<br /> aAs.opacity = mcList[i].alpha;<br /> }<br /> }<br /> function sineCosine( a, b, c)<br /> {<br /> sa = Math.sin(a * dtr);<br /> ca = Math.cos(a * dtr);<br /> sb = Math.sin(b * dtr);<br /> cb = Math.cos(b * dtr);<br /> sc = Math.sin(c * dtr);<br /> cc = Math.cos(c * dtr);<br /> }<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
js常用3D标签云2
<br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>js标签云</title><br /> <style type="text/css"><br /> #tagbox{position:relative;margin:10px auto 0px;height:250px;}<br /> #tagbox a{position:absolute;padding:3px 6px;color:#87b126;top:0px;text-decoration:none;left:0px}<br /> #tagbox a:hover{border:#fff 1px solid;background:#000;color:#fff;}<br /> #tagbox .color1{color:#393c3c}<br /> #tagbox .color2{color:#e05656}<br /> #tagbox .color3{color:#87b126}<br /> #tagbox .color4{color:#d86135}<br /> #tagbox .color5{color:#17a6c2}<br /> #tagbox .color6{color:#804a99}<br /> </style><br /> </head><br /> <body><br /> <script type="text/javascript" src="tags.js"></script><br /> <div id="tagbox"><br /> <a href="#">美女</a><br /> <a class="color1" href="#">写真</a><br /> <a class="color5" href="#">贴图</a><br /> <a class="color3" href="#">灌水</a><br /> <a class="color1" href="#">大片</a><br /> <a href="#">小说</a><br /> <a class="color2" href="#">欧美</a><br /> <a class="color4" href="#">日韩</a><br /> <a href="#">诱人</a><br /> <a class="color5" href="#">搞笑</a><br /> <a href="#">性感</a><br /> <a class="color1" href="#">壁纸</a><br /> <a class="color5" href="#">泳装</a><br /> <a class="color2" href="#">言情</a><br /> <a class="color3" href="#">浪漫</a><br /> <a class="color4" href="#">耽美</a><br /> <a class="color1" href="#">爆笑</a><br /> <a class="color2" href="#">美眉</a><br /> <a class="color4" href="#">同人</a><br /> <a class="color5" href="#">武侠</a><br /> <a class="color4" href="#">魔幻</a><br /> <a href="#">教案</a><br /> <a href="#">论文</a><br /> <a class="color3" href="#">妩媚</a><br /> <a href="#">黑丝</a><br /> <a href="#">诱惑</a><br /> <a class="color1" href="#">科幻</a><br /> <a class="color2" href="#">恐怖</a><br /> <a class="color2" href="#">性感</a><br /> <a class="color3" href="#">TXT下载</a><br /> <a href="#">音乐</a><br /> <a class="color4" href="#">游戏</a><br /> <a class="color5" href="#">CG资源</a><br /> <a href="#">YunFile</a><br /> <a href="#">课件</a><br /> <a href="#">幽默</a><br /> <a ref="#">波霸</a><br /> <a href="#">私人照</a><br /> <a href="#">名校</a><br /> <a class="color2" href="#">赚钱</a><br /> <a class="color3" href="#">千脑</a><br /> <a class="color4" href="#">清純</a><br /> <a class="color5" href="#">云电脑</a><br /> </div><br /> <!-- tags.js --><br /> <script><br /> var radius = 100,<br /> dtr = Math.PI/180,<br /> d=200,<br /> mcList = [],<br /> active = false,<br /> lasta = 1,<br /> lastb = 1,<br /> distr = true,<br /> tspeed=5,<br /> size=250,<br /> mouseX=0,<br /> mouseY=0,<br /> howElliptical=1,<br /> aA=null,<br /> oDiv=null;<br /> window.onload=function ()<br /> {<br /> var i=0;<br /> var oTag=null;<br /> oDiv=document.getElementById('tagbox');<br /> aA=oDiv.getElementsByTagName('a');<br /> for(i=0;i<aA.length;i++)<br /> {<br /> oTag={};<br /> oTag.offsetWidth=aA[i].offsetWidth;<br /> oTag.offsetHeight=aA[i].offsetHeight;<br /> mcList.push(oTag);<br /> }<br /> sineCosine( 0,0,0 );<br /> positionAll();<br /> oDiv.onmouseover=function ()<br /> {<br /> active=true;<br /> };<br /> oDiv.onmouseout=function ()<br /> {<br /> active=false;<br /> };<br /> oDiv.onmousemove=function (ev)<br /> {<br /> var oEvent=window.event || ev;<br /> mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2);<br /> mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2);<br /> mouseX/=5;<br /> mouseY/=5;<br /> };<br /> setInterval(update, 30);<br /> };<br /> function update()<br /> {<br /> var a;<br /> var b;<br /> if(active)<br /> {<br /> a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed;<br /> b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * tspeed;<br /> }<br /> else<br /> {<br /> a = lasta * 0.98;<br /> b = lastb * 0.98;<br /> }<br /> lasta=a;<br /> lastb=b;<br /> if(Math.abs(a)<=0.01 && Math.abs(b)<=0.01)<br /> {<br /> return;<br /> }<br /> var c=0;<br /> sineCosine(a,b,c);<br /> for(var j=0;j<mcList.length;j++)<br /> {<br /> var rx1=mcList[j].cx;<br /> var ry1=mcList[j].cy*ca+mcList[j].cz*(-sa);<br /> var rz1=mcList[j].cy*sa+mcList[j].cz*ca;<br /> var rx2=rx1*cb+rz1*sb;<br /> var ry2=ry1;<br /> var rz2=rx1*(-sb)+rz1*cb;<br /> var rx3=rx2*cc+ry2*(-sc);<br /> var ry3=rx2*sc+ry2*cc;<br /> var rz3=rz2;<br /> mcList[j].cx=rx3;<br /> mcList[j].cy=ry3;<br /> mcList[j].cz=rz3;<br /> per=d/(d+rz3);<br /> mcList[j].x=(howElliptical*rx3*per)-(howElliptical*2);<br /> mcList[j].y=ry3*per;<br /> mcList[j].scale=per;<br /> mcList[j].alpha=per;<br /> mcList[j].alpha=(mcList[j].alpha-0.6)*(10/6);<br /> }<br /> doPosition();<br /> depthSort();<br /> }<br /> function depthSort()<br /> {<br /> var i=0;<br /> var aTmp=[];<br /> for(i=0;i<aA.length;i++)<br /> {<br /> aTmp.push(aA[i]);<br /> }<br /> aTmp.sort<br /> (<br /> function (vItem1, vItem2)<br /> {<br /> if(vItem1.cz>vItem2.cz)<br /> {<br /> return -1;<br /> }<br /> else if(vItem1.cz<vItem2.cz)<br /> {<br /> return 1;<br /> }<br /> else<br /> {<br /> return 0;<br /> }<br /> }<br /> );<br /> for(i=0;i<aTmp.length;i++)<br /> {<br /> aTmp[i].style.zIndex=i;<br /> }<br /> }<br /> function positionAll()<br /> {<br /> var phi=0;<br /> var theta=0;<br /> var max=mcList.length;<br /> var i=0;<br /> var aTmp=[];<br /> var oFragment=document.createDocumentFragment();<br /> //随机排序<br /> for(i=0;i<aA.length;i++)<br /> {<br /> aTmp.push(aA[i]);<br /> }<br /> aTmp.sort<br /> (<br /> function ()<br /> {<br /> return Math.random()<0.5?1:-1;<br /> }<br /> );<br /> for(i=0;i<aTmp.length;i++)<br /> {<br /> oFragment.appendChild(aTmp[i]);<br /> }<br /> oDiv.appendChild(oFragment);<br /> for( var i=1; i<max+1; i++){<br /> if( distr )<br /> {<br /> phi = Math.acos(-1+(2*i-1)/max);<br /> theta = Math.sqrt(max*Math.PI)*phi;<br /> }<br /> else<br /> {<br /> phi = Math.random()*(Math.PI);<br /> theta = Math.random()*(2*Math.PI);<br /> }<br /> //坐标变换<br /> mcList[i-1].cx = radius * Math.cos(theta)*Math.sin(phi);<br /> mcList[i-1].cy = radius * Math.sin(theta)*Math.sin(phi);<br /> mcList[i-1].cz = radius * Math.cos(phi);<br /> aA[i-1].style.left=mcList[i-1].cx+oDiv.offsetWidth/2-mcList[i-1].offsetWidth/2+'px';<br /> aA[i-1].style.top=mcList[i-1].cy+oDiv.offsetHeight/2-mcList[i-1].offsetHeight/2+'px';<br /> }<br /> }<br /> function doPosition()<br /> {<br /> var l=oDiv.offsetWidth/2;<br /> var t=oDiv.offsetHeight/2;<br /> for(var i=0;i<mcList.length;i++)<br /> {<br /> aA[i].style.left=mcList[i].cx+l-mcList[i].offsetWidth/2+'px';<br /> aA[i].style.top=mcList[i].cy+t-mcList[i].offsetHeight/2+'px';<br /> aA[i].style.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';<br /> aA[i].style.filter="alpha(opacity="+100*mcList[i].alpha+")";<br /> aA[i].style.opacity=mcList[i].alpha;<br /> }<br /> }<br /> function sineCosine( a, b, c)<br /> {<br /> sa = Math.sin(a * dtr);<br /> ca = Math.cos(a * dtr);<br /> sb = Math.sin(b * dtr);<br /> cb = Math.cos(b * dtr);<br /> sc = Math.sin(c * dtr);<br /> cc = Math.cos(c * dtr);<br /> }<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
jquery常用3D标签云TagCloud..js
<br /> <!doctype html public "lice"><br /> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--><br /> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--><br /> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--><br /> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--><br /> <head><br /> <meta charset="utf-8"><br /> <title>jquery tagcloud plugin demo</title><br /> <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script><br /> <style>*{resize:none;border:none;outline:none;text-decoration:none;padding:0px;margin:0px;list-style-type:none;}</style><br /> <script type="text/javascript"><br /> var settings = {<br /> //height of sphere container<br /> height: 400,<br /> //width of sphere container<br /> width: 400,<br /> //radius of sphere<br /> radius: 150,<br /> //rotation speed<br /> speed: 3,<br /> //sphere rotations slower<br /> slower: 0.9,<br /> //delay between update position<br /> timer: 5,<br /> //dependence of a font size on axis Z<br /> fontMultiplier: 15,<br /> //tag css stylies on mouse over<br /> hoverStyle: {<br /> border: 'none',<br /> color: '#0b2e6f'<br /> },<br /> //tag css stylies on mouse out<br /> mouseOutStyle: {<br /> border: '',<br /> color: ''<br /> }<br /> };<br /> $(document).ready(function(){<br /> $('#tagcloud').tagoSphere(settings);<br /> });<br /> </script><br /> </head><br /> <body><br /> <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]--><br /> <h1 style=" text-align:center">jquery tagcloud plugin demo</h1><br /> <div id="tagcloud" style="margin:0px auto"><br /> <ul><br /> <li><a href="#">dazzlingly</a></li><br /> <li><a href="#">ultimity</a></li><br /> <li><a href="#">Orleanist</a></li><br /> <li><a href="#">cephalogenesis</a></li><br /> <li><a href="#">willyer</a></li><br /> <li><a href="#">unhustling</a></li><br /> <li><a href="#">polydactylism</a></li><br /> <li><a href="#">scriever</a></li><br /> <li><a href="#">spantoon</a></li><br /> <li><a href="#">Goclenian</a></li><br /> <li><a href="#">outdoor</a></li><br /> <li><a href="#">unbeknownst</a></li><br /> <li><a href="#">convictiveness</a></li><br /> <li><a href="#">scrotitis</a></li><br /> <li><a href="#">Tabriz</a></li><br /> <li><a href="#">bigener</a></li><br /> <li><a href="#">chiefly</a></li><br /> <li><a href="#">bearess</a></li><br /> <li><a href="#">untrussed</a></li><br /> <li><a href="#">clericality</a></li><br /> <li><a href="#">lagen</a></li><br /> <li><a href="#">Gervas</a></li><br /> <li><a href="#">rerebrace</a></li><br /> <li><a href="#">mott</a></li><br /> <li><a href="#">vertimeter</a></li><br /> <li><a href="#">tormentous</a></li><br /> <li><a href="#">jagua</a></li><br /> <li><a href="#">stromatology</a></li><br /> <li><a href="#">nonstatic</a></li><br /> <li><a href="#">rangey</a></li><br /> <li><a href="#">overzealous</a></li><br /> <li><a href="#">manufacturess</a></li><br /> <li><a href="#">affrighter</a></li><br /> <li><a href="#">Zirbanit</a></li><br /> <li><a href="#">paradigmatic</a></li><br /> <li><a href="#">unexpressive</a></li><br /> <li><a href="#">Gelidiaceae</a></li><br /> <li><a href="#">noodledom</a></li><br /> <li><a href="#">deoxygenation</a></li><br /> <li><a href="#">endoneurial</a></li><br /> <li><a href="#">convenee</a></li><br /> <li><a href="#">leapable</a></li><br /> <li><a href="#">maxilliform</a></li><br /> <li><a href="#">filching</a></li><br /> <li><a href="#">unavoidably</a></li><br /> <li><a href="#">szlachta</a></li><br /> <li><a href="#">azotoluene</a></li><br /> <li><a href="#">inchoate</a></li><br /> <li><a href="#">strikeless</a></li><br /> <li><a href="#">gadding</a></li><br /> </ul><br /> </div><br /> </body><br /> </html><br /> <!-- tagcloud.jquery.js --><br /> <script><br /> /**<br /> * jQuery TagCloud plugin<br /> *<br /> * @version 1.2.2 (12-MAY-2009)<br /> * @author Nurul Ferdous <nurul_ferdous@yahoo.com><br /> * @requires jQuery v1.4.3 or later Examples and documentation at:<br /> * http://dynamicguy.com/ Dual licensed under the MIT and GPL<br /> * licenses: http://www.opensource.org/licenses/mit-license.php<br /> * http://www.gnu.org/licenses/gpl.html<br /> *<br /> * Revision: $Id$<br /> */<br /> ;( function($) {<br /> var tags;<br /> var mathAssets = {<br /> halfHeight : null,<br /> halfWidth : null,<br /> hwratio : null,<br /> dtr : null,<br /> diameter : null,<br /> speedX : null,<br /> speedY : null,<br /> tLength : null<br /> }<br /> var settings = {<br /> //height of sphere container<br /> height : 400,<br /> //width of sphere container<br /> width : 400,<br /> //radius of sphere<br /> radius : 150,<br /> //rotation speed<br /> speed : 3,<br /> //sphere rotations slower<br /> slower : 0.9,<br /> //delay between update position<br /> timer : 5,<br /> //dependence of a font size on axis Z<br /> fontMultiplier : 15,<br /> //tag css stylies on mouse over<br /> hoverStyle : {<br /> border : '1px solid #935C26',<br /> color : '#935C26'<br /> },<br /> //tag css stylies on mouse out<br /> mouseOutStyle : {<br /> border : 'none',<br /> color : 'red'<br /> }<br /> }<br /> var curState = {<br /> mouseOver : null,<br /> lastFy : null,<br /> lastFx : null,<br /> sy : null,<br /> cy : null,<br /> sx : null,<br /> cx : null,<br /> mouseX : null,<br /> mouseY : null<br /> }<br /> var options = {};<br /> jQuery.fn.tagoSphere = function(opt) {<br /> options = jQuery.extend(settings, opt);<br /> initContainer(this);<br /> initTags(this);<br /> initMaths();<br /> deployTags();<br /> setInterval(updateTags, options.timer);<br /> return this;<br /> };<br /> function initMaths() {<br /> mathAssets.halfHeight = options.height / 2;<br /> mathAssets.halfWidth = options.width / 2;<br /> mathAssets.speedX = options.speed / mathAssets.halfWidth;<br /> mathAssets.speedY = options.speed / mathAssets.halfHeight;<br /> mathAssets.dtr = Math.PI / 180;<br /> mathAssets.diameter = options.radius * 2;<br /> mathAssets.hwratio = options.height / options.width;<br /> mathAssets.whratio = options.width / options.height;<br /> mathAssets.tLength = tags.length - 1;<br /> curState.mouseOver = false;<br /> curState.lastFx = options.speed;<br /> curState.lastFy = options.speed;<br /> }<br /> function initContainer(tagContainer) {<br /> tagContainer.height(options.height);<br /> tagContainer.width(options.width);<br /> tagContainer.css( {<br /> 'overflow' : 'hidden',<br /> 'position' : 'relative'<br /> });<br /> tagContainer.mousemove( function(e) {<br /> curState.mouseX = e.pageX - this.offsetLeft;<br /> curState.mouseY = e.pageY - this.offsetTop;<br /> });<br /> tagContainer.hover( function() {<br /> curState.mouseOver = true;<br /> }, function() {<br /> curState.mouseOver = false;<br /> });<br /> }<br /> function initTags(tagContainer) {<br /> tags = tagContainer.children('ul').children();<br /> tags.css( {<br /> 'position' : 'absolute',<br /> 'list-style-type' : 'none',<br /> 'list-style-position' : 'outside',<br /> 'list-style-image' : 'none'<br /> });<br /> for ( var i = 0; i < tags.length; i++) {<br /> var jTag = jQuery(tags[i]);<br /> var link = jQuery(jTag.children()[0]);<br /> tags[i] = jTag;<br /> jTag.hover( function() {<br /> jQuery(this).css(options.hoverStyle);<br /> }, function() {<br /> jQuery(this).css(options.mouseOutStyle);<br /> })<br /> }<br /> }<br /> function deployTags() {<br /> var phi = 0;<br /> var theta = 0;<br /> var max = mathAssets.tLength + 1;<br /> var i = 0;<br /> while (i++ < max) {<br /> phi = Math.acos(-1 + (2 * i - 1) / max);<br /> theta = Math.sqrt(max * Math.PI) * phi;<br /> tags[i - 1].cx = options.radius * Math.cos(theta) * Math.sin(phi);<br /> tags[i - 1].cy = options.radius * Math.sin(theta) * Math.sin(phi);<br /> tags[i - 1].cz = options.radius * Math.cos(phi);<br /> tags[i - 1].h = jQuery(tags[i - 1]).height() / 4;<br /> tags[i - 1].w = jQuery(tags[i - 1]).width() / 4;<br /> }<br /> }<br /> function calcRotation(fy, fx) {<br /> curState.sy = Math.sin(fy * mathAssets.dtr);<br /> curState.cy = Math.cos(fy * mathAssets.dtr);<br /> curState.sx = Math.sin(fx * mathAssets.dtr);<br /> curState.cx = Math.cos(fx * mathAssets.dtr);<br /> }<br /> function updateTags() {<br /> var fy;<br /> var fx;<br /> if (curState.mouseOver) {<br /> fy = options.speed - mathAssets.speedY * curState.mouseY;<br /> fx = mathAssets.speedX * curState.mouseX - options.speed;<br /> } else {<br /> fy = curState.lastFy * options.slower;<br /> fx = curState.lastFx * options.slower;<br /> }<br /> if (curState.lastFy != fy || curState.lastFx != fx) {<br /> calcRotation(fy, fx);<br /> curState.lastFy = fy;<br /> curState.lastFx = fx;<br /> }<br /> if (Math.abs(fy) > 0.01 || Math.abs(fx) > 0.01) {<br /> j = -1;<br /> while (j++ < mathAssets.tLength) {<br /> rx1 = tags[j].cx;<br /> ry1 = tags[j].cy * curState.cy + tags[j].cz * -curState.sy;<br /> rz1 = tags[j].cy * curState.sy + tags[j].cz * curState.cy;<br /> tags[j].cx = rx1 * curState.cx + rz1 * curState.sx;<br /> tags[j].cy = tags[j].cy * curState.cy + tags[j].cz<br /> * -curState.sy;<br /> tags[j].cz = rx1 * -curState.sx + rz1 * curState.cx;<br /> var per = mathAssets.diameter<br /> / (mathAssets.diameter + tags[j].cz);<br /> tags[j].x = tags[j].cx * per;<br /> tags[j].y = tags[j].cy * per;<br /> tags[j].alpha = per / 2;<br /> tags[j]<br /> .css( {<br /> 'left' : mathAssets.whratio<br /> * (tags[j].x - tags[j].w * per)<br /> + mathAssets.halfWidth,<br /> 'top' : mathAssets.hwratio<br /> * (tags[j].y - tags[j].h * per)<br /> + mathAssets.halfHeight,<br /> 'opacity' : tags[j].alpha,<br /> 'font-size' : options.fontMultiplier<br /> * tags[j].alpha + 'px',<br /> 'z-index' : Math.round(-tags[j].cz)<br /> });<br /> }<br /> }<br /> }<br /> })(jQuery);<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
jquery常用3D标签云windstagball
<br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>标签云 - 标签球 - windstagball v1.0</title><br /> <style type="text/css"><br /> body {background: #FFF }<br /> #div1 {position:relative; width:350px; height:350px; border:1px solid #000; margin: 20px auto 0; }<br /> #div1 a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#000; font-weight:bold; text-decoration:none; padding: 3px 6px; }<br /> #div1 a:hover {border: 1px solid #eee; background: #FFF; }<br /> #div1 .blue {color:blue;}<br /> #div1 .red {color:red;}<br /> #div1 .green {color:green;}<br /> p { font: 16px Microsoft YaHei; text-align: center; color: #ba0c0c; }<br /> p a { font-size: 14px; color: #ba0c0c; }<br /> p a:hover { color: red; }<br /> </style><br /> <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script><br /> </head><br /> <body><br /> <div id="div1"><br /> <a href="#">标签云</a><br /> <a href="#" class="red">PHP</a><br /> <a href="#">瀑布流</a><br /> <a href="#">Tab</a><br /> <a href="#" class="blue">流体布局</a><br /> <a href="#">SEO</a><br /> <a href="#" class="red">彩蛋</a><br /> <a href="#" class="green">JavaScript</a><br /> <a href="#">miaov</a><br /> <a href="#" class="red">CSS</a><br /> <a href="#">asp.net</a><br /> <a href="#" class="blue">蓝色经典</a><br /> <a href="#">OOP</a><br /> <a href="#" class="red">Android</a><br /> <a href="#" class="blue">妙味茶馆</a><br /> <a href="#">dialog</a><br /> <a href="#" class="blue">淘客</a><br /> <a href="#">Pin</a><br /> <a href="#">微博</a><br /> <a href="#" class="green">IPhone</a><br /> </div><br /> <!-- jquery.windstagball --><br /> <script><br /> /**<br /> * JQuery.windstagball.js<br /> * @description : 源码和创作思路来源于miaov,作者只是改良为Jquery插件，方便喜欢用jquery插件的人使用<br /> * @author : miaov winds<br /> * @url : http://www.miaov.com/ http://www.lijian.net/<br /> * @qq : 342377<br /> * @version :v1.0<br /> * @create :2012.05.04<br /> */<br /> ; (function($) {<br /> $.fn.windstagball = function(options) {<br /> <br /> var defaults = {<br /> radius: 120,<br /> size: 300,<br /> speed: 10,<br /> depth: 300,<br /> howElliptical: 1,<br /> fontsize: 12<br /> },<br /> param = $.extend({}, defaults, options || {}),<br /> selector = $(this).selector,<br /> warp = $(this),<br /> items = $(selector + ' a'),<br /> dtr = Math.PI / 180,<br /> itemPosList = [],<br /> active = false,<br /> lasta = 1,<br /> lastb = 1,<br /> distr = true,<br /> mouseX = 0,<br /> mouseY = 0,<br /> sb, sa, sc, ca, cb, cc, oItem, oEvent, si;<br /> items.each(function() {<br /> oItem = {};<br /> oItem.width = $(this).width();<br /> oItem.height = $(this).height();<br /> itemPosList.push(oItem);<br /> });<br /> <br /> <br /> init();<br /> <br /> warp.mouseover(function() {<br /> active = true;<br /> });<br /> <br /> warp.mouseout(function() {<br /> active = false;<br /> });<br /> <br /> warp.mousemove(function(ev) {<br /> oEvent = window.event || ev;<br /> mouseX = oEvent.clientX - (warp.offset().left + warp.width() / 2);<br /> mouseY = oEvent.clientY - (warp.offset().top + warp.height() / 2);<br /> mouseX /= 5;<br /> mouseY /= 5;<br /> });<br /> <br /> setInterval(setPosition, 30);<br /> <br /> //初始化位置<br /> function init() {<br /> var phi = 0,<br /> theta = 0,<br /> max = itemPosList.length;<br /> sineCosine(0, 0, 0);<br /> //初始随机排序<br /> items.sort(function() {<br /> return Math.random() < 0.5 ? 1 : -1;<br /> });<br /> <br /> items.each(function(i) {<br /> if (distr) {<br /> phi = Math.acos(-1 + (2 * i) / max);<br /> theta = Math.sqrt(max * Math.PI) * phi;<br /> }<br /> else {<br /> phi = Math.random() * (Math.PI);<br /> theta = Math.random() * (2 * Math.PI);<br /> }<br /> itemPosList[i].cx = param.radius * Math.cos(theta) * Math.sin(phi);<br /> itemPosList[i].cy = param.radius * Math.sin(theta) * Math.sin(phi);<br /> itemPosList[i].cz = param.radius * Math.cos(phi);<br /> $(this).css('left', itemPosList[i].cx + warp.width() / 2 - itemPosList[i].width / 2 + 'px');<br /> $(this).css('top', itemPosList[i].cy + warp.height() / 2 - itemPosList[i].height / 2 + 'px');<br /> });<br /> };<br /> <br /> function sineCosine(a, b, c) {<br /> sa = Math.sin(a * dtr);<br /> ca = Math.cos(a * dtr);<br /> sb = Math.sin(b * dtr);<br /> cb = Math.cos(b * dtr);<br /> sc = Math.sin(c * dtr);<br /> cc = Math.cos(c * dtr);<br /> };<br /> <br /> function setPosition() {<br /> var a, b, c = 0, j, rx1, ry1, rz1, rx2, ry2, rz2, rx3, ry3, rz3, l = warp.width() / 2, t = warp.height() / 2;<br /> <br /> if (active) {<br /> a = (-Math.min(Math.max(-mouseY, -param.size), param.size) / param.radius) * param.speed;<br /> b = (Math.min(Math.max(-mouseX, -param.size), param.size) / param.radius) * param.speed;<br /> }<br /> else {<br /> a = lasta * 0.98;<br /> b = lastb * 0.98;<br /> }<br /> lasta = a;<br /> lastb = b;<br /> if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {<br /> return;<br /> }<br /> sineCosine(a, b, c);<br /> for (j = 0; j < itemPosList.length; j++) {<br /> rx1 = itemPosList[j].cx;<br /> ry1 = itemPosList[j].cy * ca + itemPosList[j].cz * (-sa);<br /> rz1 = itemPosList[j].cy * sa + itemPosList[j].cz * ca;<br /> rx2 = rx1 * cb + rz1 * sb;<br /> ry2 = ry1;<br /> rz2 = rx1 * (-sb) + rz1 * cb;<br /> rx3 = rx2 * cc + ry2 * (-sc);<br /> ry3 = rx2 * sc + ry2 * cc;<br /> rz3 = rz2;<br /> itemPosList[j].cx = rx3;<br /> itemPosList[j].cy = ry3;<br /> itemPosList[j].cz = rz3;<br /> per = param.depth / (param.depth + rz3);<br /> itemPosList[j].x = (param.howElliptical * rx3 * per) - (param.howElliptical * 2);<br /> itemPosList[j].y = ry3 * per;<br /> itemPosList[j].scale = per;<br /> itemPosList[j].alpha = per;<br /> <br /> itemPosList[j].alpha = (itemPosList[j].alpha - 0.6) * (10 / 6);<br /> }<br /> items.each(function(i) {<br /> $(this).css('left', itemPosList[i].cx + l - itemPosList[i].width / 2 + 'px');<br /> $(this).css('top', itemPosList[i].cy + t - itemPosList[i].height / 2 + 'px');<br /> <br /> $(this).css('font-size', Math.ceil(param.fontsize * itemPosList[i].scale / 2) + 8 + 'px');<br /> <br /> $(this).css('filter', "alpha(opacity=" + 100 * itemPosList[i].alpha + ")");<br /> $(this).css('opacity', itemPosList[i].alpha);<br /> $(this).css("z-index", i);<br /> });<br /> }<br /> };<br /> })(jQuery);<br /> </script><br /> </body><br /> </html><br /> <script type="text/javascript"><br /> $(document).ready(function() {<br /> $("#div1").windstagball({<br /> radius:120,<br /> speed:10<br /> });<br /> });<br /> </script><br />
运行代码
您可以修改框中代码后运行查看
发表评论：
昵称
邮件地址 (选填)
个人主页 (选填)
内容