/**
* @author myemptynae
*/
function JsTagCloud(config) {
// 对对的 Div 标标
var cloud = document.getElementById(config.CloudId);
this._cloud = cloud;
// w, h 是 Div 宽的高
var w = parseInt(this._getStyle(cloud, 'width'));
var h = parseInt(this._getStyle(cloud, 'height'));
this.width = (w - 100) / 2;
this.height = (h - 50) / 2;
// 初始化
this._items = cloud.getElementsByTagName('a');
this._count = this._items.length;
this._angle = 360 / (this._count);
this._radian = this._angle * (2 * Math.PI / 360);
this.step = 0;
}
//获对取象 Style
JsTagCloud.prototype._getStyle = function(elem, name) {
return window.getComputedStyle ? window.getComputedStyle(elem, null)[name]
: elem.currentStyle[name];
};
//标标渲染云
JsTagCloud.prototype._render = function() {
for (var i = 0; i < this._count; i++) {
var item = this._items[i];
var thisRadian = (this._radian * i) + this.step;
var sinV = Math.sin(thisRadian);
var cosV = Math.cos(thisRadian);
// 设置 CSS 联联内式
item.style.left = (sinV * this.width) + this.width + 'px';
item.style.top = this.height + (cosV * 50) + 'px';
item.style.fontSize = cosV * 10 + 20 + 'pt';
item.style.zIndex = cosV * 1000 + 2000;
item.style.opacity = (cosV / 2.5) + 0.6;
item.style.filter = " alpha(opacity=" + ((cosV / 2.5) + 0.6) * 100 + ")";
}
this.step += 0.007;
};
//开始
JsTagCloud.prototype.start = function() {
setInterval (function(who) {
return function()
{
who._render();
};
}(this), 20);
};
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="tg.css" />
<script src="tg.js"></script>
<script>
window.onload=function (){
var tagCloud = new JsTagCloud({ CloudId: 'tagCloud' });
tagCloud.start();
};
</script>
</head>
<body>
<div id="tagCloud">
<a href="#">javascript</a>
<a href="#">html</a>
<a href="#">css</a>
</div>
</body>
</html>
#tagCloud {
height: 300px;
width: 600px;
position: relative;
margin: 0;
overflow: hidden;
}
#tagCloud a {
position: absolute;
text-decoration: none;
color: #0B61A4;
text-shadow: #66A3D2 1px -1px 1px;
}
分享到：
相关推荐
在Android开发中，3D标签云卡片是一种独特的用户界面元素，它可以增强应用的视觉效果，同时提供了一种交互式的方式来展示大量数据。本资源“安卓3D标签云卡片热门相关-Android实现标签拖动改变位置.rar”似乎包含了...
在安卓应用开发中，"3D标签云卡片热门"是一个常见的功能，用于展示热门话题或者标签，提升用户体验。本项目中的“安卓3D标签云卡片热门相关”涉及到一个标签控件，它允许开发者以3D效果展示标签，使得界面更具吸引力...
3D标签云是一种创新的网页元素，用于展示信息或关键词，通过三维空间的动态效果，为用户带来更直观、更具吸引力的视觉体验。这种技术在网站设计、数据分析、信息可视化等领域有着广泛的应用。"3D 标签云 中英文"项目...
JavaScript 3D标签云特效是一种视觉上引人入胜的网页设计技术，它将一系列关键词或标签以三维立体的方式展示，通常以旋转的球状排列，使得页面更具动态感和互动性。这种特效广泛应用于博客、新闻网站或者任何需要...
本资源是一个关于3D标签云的实现源代码，下面我们将详细探讨3D标签云的原理、实现方法以及如何利用提供的源码。 3D标签云的原理： 3D标签云是二维标签云的升级版，它通过引入第三维度——深度，使标签具有立体效果...
svg3dtagcloud.js利用SVG的这一优势，创建出3D标签云，使每个标签都仿佛悬浮在三维空间中。用户可以通过鼠标与这些标签互动，如旋转、缩放或点击，从而增加用户与网页的交互性。这种互动性的增强对于提升用户体验、...
在安卓开发中，3D标签云卡片是一种常见且吸引人的用户界面元素，它通常用于展示大量标签信息，如关键词、分类或热门话题。这个压缩包文件"安卓3D标签云卡片热门相关-卡片编辑文字并自动换行"显然是与创建这种效果...
【标题】：“超酷的js+css3实现的3D标签云特效”指的是利用JavaScript（js）和CSS3技术创建的一种动态视觉效果，它将传统的标签以三维立体的形式展现出来，给用户带来更加生动和有趣的交互体验。这种特效通常用于...
在压缩包的"3d标签云"文件中，可能包含以下文件： 1. HTML文件：包含HTML5标记和结构，以及可能的内联JS和CSS。 2. CSS文件：定义3D旋转、过渡和透视效果的样式规则。 3. JS文件：实现标签云的动态行为，包括旋转...
Flex 3D标签云是一种在Flex平台上创建动态、立体效果的标签展示技术，它通过将传统的二维标签转换为三维空间中的旋转元素，为用户提供了更直观、更具视觉吸引力的交互体验。这种技术常用于网站、应用程序或者数据...
在实现3D标签云的过程中，关键知识点包括： 1. **HTML结构**：首先，需要创建HTML结构来放置这些标签，每个标签通常作为一个独立的`<a>`元素，包含相应的文本和可能的链接。 2. **CSS样式**：通过CSS来定义每个...
字符云 3d球形标签云字符云 3d球形标签云字符云 3d球形标签云字符云 3d球形标签云字符云 3d球形标签云字符云 3d球形标签云字符云 3d球形标签云字符云 3d球形标签云字符云 3d球形标签云字符云 3d球形标签云字符云 3d...
【dede织梦3D标签云】是一款基于DEDECMS（织梦内容管理系统）的插件，它在传统的标签云基础上进行了创新，引入了3D视觉效果，使得网站的标签展示更加生动活泼，能吸引用户的注意力。这款插件借鉴了WordPress（wp）的...
在网页设计中，3D标签云效果是一种独特的交互方式，它可以为用户带来视觉上的吸引力，增加网站的互动性。这种效果通常应用于展示关键词、类别标签或者导航菜单，使得信息更加直观且富有动态感。本教程将详细介绍如何...
Javascript实现3D标签云的效果
在这个案例中，我们关注的是“3D标签云”特效，这是一种利用JavaScript实现的视觉效果，可以展示一系列标签以3D形式漂浮、旋转，为用户界面增添生动感和吸引力。 3D标签云的实现主要基于JavaScript的DOM操作、CSS3...
这个压缩包包含的“3d标签云”项目，很可能是用于演示如何使用JavaScript技术创建一个动态、三维的标签云效果。 在JavaScript中实现3D标签云，通常会涉及到以下几个核心知识点： 1. **HTML结构**：首先，你需要...
在Android开发中，3D标签云卡片是一种常见且吸引人的用户界面元素，它通常用于展示大量标签或关键词，如新闻分类、热门搜索等。"安卓3D标签云卡片热门相关-Android标签云效果CloudTagCloudTags.zip"这个压缩包包含了...
在Android开发中，3D标签云卡片是一种常见且吸引用户注意力的设计元素，它通常用于展示大量标签信息，如关键词、分类或热门话题。本压缩包文件"安卓3D标签云卡片热门相关-Android标签云效果--自定义标签动画绘制实现...