搜索到
1
篇与
的结果
-
Emlog非插件实现3D标签云 1.module找到你的侧边栏标签 修改侧边栏标签如下 <?php //3D标签云 function widget_tag($title){ global $CACHE; $tag_cache = $CACHE->readCache('tags');?> <div class="side"> <h3><i class="fa fa-tags mar-r-4"></i><?php echo $title;?></h3> <div id="tag_cloud_widget"> <div class="tagcloud"> <script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>js/3dtag.js"></script> <?php foreach($tag_cache as $value): ?> <a href="<?php echo Url::tag($value['tagurl']); ?>" title="<?php echo $value['usenum']; ?> 篇文章"><?php echo $value['tagname']; ?></a> <?php endforeach; ?> <div class="clear"></div></div></div></div> <?php }?>2.你的公用模板css放如下css /*3D标签云*/ #tag_cloud_widget{position:relative;width:240px;height:240px;margin:10px auto 10px} #tag_cloud_widget a{position:absolute;color:#fff;text-align:center;text-overflow:ellipsis;white-space:nowrap;top:0;left:0;padding:3px 5px;border:0} #tag_cloud_widget a:hover{background:#d02f53;display:block} #tag_cloud_widget a:nth-child(n){background:#666;border-radius:3px;display:inline-block;line-height:18px;margin:0 10px 15px 0} #tag_cloud_widget a:nth-child(2n){background:#d1a601} #tag_cloud_widget a:nth-child(3n){background:#286c4a} #tag_cloud_widget a:nth-child(5n){background:#518ab2} #tag_cloud_widget a:nth-child(4n){background:#c91d13}3.保存下面js为3dtag.js 放到你的模板js目录里面 var radius = 100; 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('tag_cloud_widget'); 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.background = '#0099ff'; 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.background = '#30899B'; 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 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; 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.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) }
