用JS实现3D球状标签云示例代码

最新推荐文章于 2021-06-26 18:08:01 发布

秦飞

最新推荐文章于 2021-06-26 18:08:01 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/u011714480/article/details/17068419

版权

这篇博客展示了如何使用JavaScript（JS）创建一个3D球状标签云的效果。通过示例代码，包括HTML、CSS和JS部分，解释了如何布局、定位和动画化标签云，以及如何实现鼠标悬停效果。示例中包含不同颜色的标签，如'水果类别'、'苹果'、'CSS'等，并提到了一些技术挑战，如悬停问题和颜色随机化问题。

摘要由CSDN通过智能技术生成

Matter：

1、发现实例不足，无法悬停（有待解决）
2、无法系统随机自动上色（有待解决）

首先使用标签云的一家高知名度的网站---照片共享网站Flickr。标签云的设计者是交互设计师Stewart Butterfield。之后，标签云被诸如del、Technorati等网站采纳。
首次公布的外观标签云（或至少是一个加权名单），可归结起来主要是"潜意识档案" ，在 Douglas Coupland的Microserfs（ 1995 ）。在Lester Leaps Out，威尔士诗人朗道，使用同样的逻辑加权文本，以创造一个图形文字地图来描述爵士音乐。诗中出现在他的书《Magic Fire Chevrolet》中（ 1980 ）。

html代码段
代码如下:

<!DOCTYPE html>
<html>
<headers>
<meta charset=utf-8 />
<title>3D球状标签</title>
<link rel="stylesheet" type="text/css" href="3Dtag_style.css" />
<script type="text/javascript" src="3Dtag.js"></script>
</headers>
<body>
<div id="div1">
<a href="#">水果类别</a>
<a href="#" class="red">苹果</a>
<a href="#">香蕉</a>
<a href="#">西瓜</a>
<a href="#" class="blue">3Dtag</a>
<a href="#">SEO</a>
<a href="#">火龙果</a>
<a href="#" class="yellow">梨</a>
<a href="#">球状</a>
<a href="#" class="red">CSS</a>
<a href="#">PHP</a>
<a href="#" class="blue">Java</a>
<a href="#">继承</a>
<a href="#">C#</a>