如何制作基于热度调整透明度的标签云？附HTML/CSS/JS实现方案

你复制的HTML和CSS已经搭建好了标签的基础样式，要实现热度越高标签越显眼（透明度越高）的效果，只需要添加一段JavaScript来动态计算并设置每个标签的透明度即可。

修改后的CSS #

先调整基础样式，给标签设置默认的较低透明度，后续由JS根据热度调整：

ul, ol {
    margin: 0;
    margin-bottom: 0px;
    padding: 0;
    list-style-type: none;
}

ul.image-tags li {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.image-tags li a:hover, ul.image-tags li a.filtered, ul.image-tags li form {
    background: #f7421b;
    opacity: 1;
    text-decoration: none;
    border: none;
}

ul.image-tags li a:link, ul.image-tags li a:visited, ul.image-tags li form {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px 10px 0;
    background: #2b2b33;
    color: #fff;
    -webkit-transition: 0.3s;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    opacity: 0.5; /* 默认低透明度，后续JS动态调整 */
}

保持原HTML结构（移除外链） #

你的HTML已经包含了标签的热度信息（title属性内的数字），直接使用即可：

<div class="section tags">
  <ul class="image-tags">
    <li><a href="#" class="tag-size-4" title="View all images tagged with App (2110)">App&nbsp;(2110)</a></li>
    <li><a href="#" class="tag-size-4" title="View all images tagged with Apple (2098)">Apple&nbsp;(2098)</a></li>
    <li><a href="#" class="tag-size-2" title="View all images tagged with Black (1417)">Black&nbsp;(1417)</a></li>
    <li><a href="#" class="tag-size-4" title="View all images tagged with Blog (2281)">Blog&nbsp;(2281)</a></li>
    <li><a href="#" class="tag-size-3" title="View all images tagged with Blue (1964)">Blue&nbsp;(1964)</a></li>
    <li><a href="#" class="tag-size-5" title="View all images tagged with Clean (2566)">Clean&nbsp;(2566)</a></li>
    <li><a href="#" class="tag-size-4" title="View all images tagged with Color (2246)">Color&nbsp;(2246)</a></li>
    <li><a href="#" class="tag-size-4" title="View all images tagged with Dark (2122)">Dark&nbsp;(2122)</a></li>
    <li><a href="#" class="tag-size-12" title="View all images tagged with Design (5048)">Design&nbsp;(5048)</a></li>
    <li><a href="#" class="tag-size-2" title="View all images tagged with Grid (1498)">Grid&nbsp;(1498)</a></li>
    <li><a href="#" class="tag-size-1" title="View all images tagged with Homepage (1213)">Homepage&nbsp;(1213)</a></li>
    <li><a href="#" class="tag-size-3" title="View all images tagged with Icons (1778)">Icons&nbsp;(1778)</a></li>
    <li><a href="#" class="tag-size-7" title="View all images tagged with Illustration (3211)">Illustration&nbsp;(3211)</a></li>
    <li><a href="#" class="tag-size-20" title="View all images tagged with Inspiration (7817)">Inspiration&nbsp;(7817)</a></li>
    <li><a href="#" class="tag-size-3" title="View all images tagged with Interface (1767)">Interface&nbsp;(1767)</a></li>
    <li><a href="#" class="tag-size-5" title="View all images tagged with iPhone (2486)">iPhone&nbsp;(2486)</a></li>
    <li><a href="#" class="tag-size-3" title="View all images tagged with Layout (1762)">Layout&nbsp;(1762)</a></li>
    <li><a href="#" class="tag-size-4" title="View all images tagged with Light (2079)">Light&nbsp;(2079)</a></li>
    <li><a href="#" class="tag-size-5" title="View all images tagged with Logo (2518)">Logo&nbsp;(2518)</a></li>
    <li><a href="#" class="tag-size-4" title="View all images tagged with Mac (2240)">Mac&nbsp;(2240)</a></li>
    <li><a href="#" class="tag-size-1" title="View all images tagged with Navigation (1147)">Navigation&nbsp;(1147)</a></li>
    <li><a href="#" class="tag-size-4" title="View all images tagged with Photography (2348)">Photography&nbsp;(2348)</a></li>
    <li><a href="#" class="tag-size-10" title="View all images tagged with Portfolio (4159)">Portfolio&nbsp;(4159)</a></li>
    <li><a href="#" class="tag-size-1" title="View all images tagged with Poster (1180)">Poster&nbsp;(1180)</a></li>
    <li><a href="#" class="tag-size-10" title="View all images tagged with Typography (4363)">Typography&nbsp;(4363)</a></li>
    <li><a href="#" class="tag-size-14" title="View all images tagged with Web (5616)">Web&nbsp;(5616)</a></li>
    <li><a href="#" class="tag-size-3" title="View all images tagged with Web Design (1863)">Web&nbsp;Design&nbsp;(1863)</a></li>
    <li><a href="#" class="tag-size-2" title="View all images tagged with Webdesign (1540)">Webdesign&nbsp;(1540)</a></li>
    <li><a href="#" class="tag-size-9" title="View all images tagged with Website (3817)">Website&nbsp;(3817)</a></li>
    <li><a href="#" class="tag-size-5" title="View all images tagged with White (2520)">White&nbsp;(2520)</a></li>
  </ul>
</div>

JavaScript代码 #

这段代码会提取每个标签的热度值，计算归一化后的透明度并应用：

document.addEventListener('DOMContentLoaded', function() {
    const tags = document.querySelectorAll('.image-tags li a');
    let maxCount = 0;
    const counts = [];

    // 收集所有热度值，找出最大值
    tags.forEach(tag => {
        const countMatch = tag.title.match(/\((\d+)\)/);
        if (countMatch) {
            const count = parseInt(countMatch[1], 10);
            counts.push(count);
            maxCount = Math.max(maxCount, count);
        }
    });

    // 给每个标签设置对应透明度
    tags.forEach((tag, index) => {
        const count = counts[index];
        if (count) {
            // 归一化到0.5-1区间，保证低热度标签仍可见
            const opacity = Math.max(0.5, count / maxCount);
            tag.style.opacity = opacity;
        }
    });
});

效果说明 #

• 热度最高的标签透明度为1，其他标签根据热度比例从0.5到1渐变
• 鼠标hover标签时，会自动切换为红色且透明度强制设为1，保持交互反馈

内容的提问来源于stack exchange，提问作者kevinlinxc