最新公告
  • 欢迎您光临影客学习网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • Emlog不用插件实现3D标签云教

     

    教程演示

    Emlog不用插件实现3D标签云教程-第1张图片-零零娱乐网

     

    第一步

    module找到你的侧边栏标签 修改侧边栏标签如下

    PHP
    <?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 }?> 本段代码来自 http://www.00ylw.com/emlog/2035.html
     

    第二步

    你的公用模板css放如下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} 本段代码来自 http://www.00ylw.com/emlog/2035.html
     

    第三步

    保存下面js为3dtag.js 放到你的模板js目录里面

    JavaScript
    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)
    } 本段代码来自 http://www.00ylw.com/emlog/2035.html
     


    关注微信公众号『影客学习网』

    第一时间了解最新网络动态关注博主不迷路~

    1. 本站所有资源来源于用户上传和互联网,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流!
    3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务,除了本站原创售价资源都有技术服务,请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
    影客学习网 » Emlog不用插件实现3D标签云教

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    为什么评论刷新后不显示?
    评论文章的时候,每次评论都要填网站下面一定要勾选,否则可能下载链接显示不出来!一定要记住!

    1 评论

    发表评论

    • 49会员总数(位)
    • 846资源总数(个)
    • 3本周发布(个)
    • 0 今日发布(个)
    • 533稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    升级SVIP尊享更多特权立即升级