Js 标签云

最新推荐文章于 2022-01-05 05:47:30 发布
最新推荐文章于 2022-01-05 05:47:30 发布
阅读量1.6k 收藏 2
点赞数 2
分类专栏： JS 文章标签： 云标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuyw10000/article/details/27244561
版权

看到网上有那种标签云觉得蛮炫的,想自己玩玩

/**
 * 云标签
 * 
 * @author xuyw

 * @email xyw10000@163.com
 * @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.οnlοad=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);
}

xyw10000
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
tagcloud.js:用HTML5生成标签云的Javascript
04-29
tagcloud.js 使用HTML5生成标签云的Javascript。 这在蜥蜴（ ）项目中用作扩展来生成源代码的标签云。 （有关更多信息，请使用lizard -EWordCount命令。） 如何使用它 只有一个TagCloud类具有一个render方法。 基本上，您需要一个HTML5并传递画布的宽度，高度和2D上下文以创建TagCloud： function draw ( ) { var canvas = document . getElementById ( "canvas" ) ; if ( canvas . getContext ) { var ctx = canvas . getContext ( "2d" ) ; var tagCloud = new TagCloud ( canvas . width , canvas .
js简单实现标签云效果实例
10-23
主要介绍了js简单实现标签云效果,基于miaov.js文件实现标签云的3D滚动效果,非常简单实用,需要的朋友可以参考下
js实现动态标签云
山有木兮木有枝 心悦君兮君不知
09-09 668
备注：标签可上下滚动的 mounted:function(){ var oDiv = document.getElementById('tagArrDIv'); var aA = document.getElementsByTagName('span'); var i = 0; for (i = 0; i < aA.length; i++) { aA[i].pause = 1; aA[i].time = null; initialize(aA[i]);...
JS自写带描述标签云
山水云的博客
10-12 2294
这个版本是随机排序，原理是随机颜色、随机字号，首尾三行逐行缩进形成椭圆形构造。效果预览：HTML部分：<div id="tagCloud" style="width: 400px; height: 400px; border: 1px solid #ccc; margin: 20px auto; padding: 100px; position: relative"> <span id="d
用一些简单的CSS和JavaScript创建一个标签云
前端全栈开发者
02-25 484
来自博客：blog.zhangbing.site 我一直很喜欢标签云，我喜欢通过看标签的相对字体大小来了解网站上最受欢迎的标签是哪些，受欢迎的标签更大。 制作标签云有多困难？一点也不难。让我们来看看！ 让我们从HTML开始 对于我们的HTML，我们将每个标签放入<ul class=“tags”><ul> 列表中，我们将使用JavaScript进行注入。 我模拟出了一些JSON，每个属性都有一定数量的文章标签。让我们写一些JavaScript来获取JSON feed并做三件事。 首.
标签云，js实现
热门推荐
07-20 48万+
标签云，纯js代码实现！ 一、效果图      二、代码      #div_tag {position:relative; height:540px; border: 1px solid #0097d3;} #div_tag a { position:absolute;
js实现3d标签云tag动画效果js特效代码
ICode联盟
01-05 915
下载地址JS制作TAG标签云文字动画特效是一款当鼠标悬停某个标签时，当前标签静止，移出恢复滚动效果。tagcloud({ selector: ".tagcloud", //元素选择器 fontsize: 16, //基本字体大小, 单位px radius: 100, //滚动半径, 单位px mspeed: "normal", //滚动最大速度, 取值: slow, normal(默认), fast ispeed: "normal", //滚动初速度, 取值: slow, normal(默认), fast
标签云特效
愿你拥有大风与烈酒,也能享受孤独与自由
03-25 856
记录一些好看的特效 示例: JS tagcanvas.js /** * tagcanvas.js和tagcloud.js是 标签云所需要的 */ (function(){ "use strict"; var i, j, abs = Math.abs, sin = Math.sin, cos = Math.cos, max = Math.max, min = Math.min, ceil = Math.ceil, sqrt = Math.sqrt, pow = Math.pow, hexlook
原生js标签云.zip
09-01
原生js生成标签云
3D模型展示js插件 sein.js和main.js
09-03
用于展示3D模型的js。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
js标签云支持中文，文件小巧
06-23
用js 写的3D标签云，支持中文，只需加载css文件和一个js文件，小巧，相比flash 性能明显优化.
javascript实现动态标签云
11-22
今天上学校的图书馆，看到了一个好玩的东西，特意百度了下，发现叫做“标签球”，效果图为： 直接代码如下： CSS: #div1 {position:relative; width:350px; height:350px; border:1px solid #000; margin: 20px auto 0; } #div1 a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#000; font-weight:bold; text-decoration:none; padding: 3px
JS标签云实现选择功能
07-18
JS标签云
js-3d云标签
06-30
封装好的3D 云标签效果，可以直接调用
深入解析JS实现3D标签云的原理与方法
10-16
主要介绍了深入解析JS实现3D标签云的原理与方法,结合实例形式详细分析了3D标签云原理、实现技巧与相关操作注意事项,需要的朋友可以参考下
JavaScript实现的圆形浮动标签云效果实例
10-23
主要介绍了JavaScript实现的圆形浮动标签云效果,涉及javascript字符串与数组的遍历、排序操作以及元素样式动态操作与数学运算等相关技巧,是非常实用的一段代码,需要的朋友可以参考下
原生js生成标签云
weixin_43005845的博客
09-03 556
/* * 3d标签云 * 功能：鼠标移入标签，当前标签静止放大 * 说明： * */ window.tagcloud = (function(win, doc) { // ns // 判断对象 function isObject (obj) { return Object.prototype.toString.call(obj) === '[object Object]'; } // 构造函数 function TagCloud (options.
3d云html原理,深入解析JS实现3D标签云的原理与方法
weixin_39781452的博客
05-31 535
本文实例讲述了深入解析JS实现3D标签云的原理与方法。分享给大家供大家参考，具体如下：最近开始用canvas搞3D了，搞得也是简单的东西，就是球体转圈。做出来后，突然想起以前看过的3D标签云，在以前觉得真心狂拽酷炫叼啊，当时也确实不知道怎么在平面上模拟3D，所以也就没去搞了。现在刚好用了canvas搞3D，也发现，好像3D标签云也差不多，然后就写了一下。具体怎么做呢，先说一下原理，3D标签云就是做...
js 3d标签云
最新发布
05-24
您可以使用Three.js和TagCloud.js来创建一个JavaScript 3D标签云。 1. 首先，您需要引入Three.js和TagCloud.js库： ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值