svg3dtagcloud生成3D标签云

本文展示了如何使用svg3dtagcloud库生成具有视觉吸引力的3D标签云效果。通过提供的JavaScript代码示例,读者可以自行创建或在自己的项目中应用这种效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我做了一个简单的效果图..会旋转的哦~!

js下载点我

这里的js本来想0分下载的..但上传资源的时候不知道为什么,没有0分的选项.在联系管理员帮忙修改了.

这里把js中的代码贴出来,不想下载的朋友可以自己建一个js文件,将下面代码贴进去就行了.

/*
 * Copyright (c) 2017 Niklas Knaack
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

!function() {
    function t(t, e) {
        function o() {
            F = document.createElementNS(N, "svg"), F.addEventListener(
                    "mousemove", v), t.appendChild(F), x.bgDraw
                    && (D = document.createElementNS(N, "rect"), D
                            .setAttribute("x", 0), D.setAttribute("y", 0), D
                            .setAttribute("fill", x.bgColor), F.appendChild(D)), a(), i(), h(), window
                    .addEventListener("resize", b)
        }
        function i() {
            var e = window.innerWidth || document.documentElement.clientWidth
                    || document.body.clientWidth, o = window.innerHeight
                    || document.documentElement.clientHeight
                    || document.body.clientHeight, i = e, r = o;
            x.width.toString().indexOf("%") > 0
                    || x.height.toString().indexOf("%") > 0
                    ? (i = Math.round(t.offsetWidth / 100 * parseInt(x.width)), r = Math
                            .round(i / 100 * parseInt(x.height)))
                    : (i = parseInt(x.width), r = parseInt(x.height)), i >= e
                    && (i = e), r >= o && (r = o), P = {
                x : i / 2,
                y : r / 2
            }, E.x = x.speed / P.x, E.y = x.speed / P.y, S = i >= r ? r / 100
                    * parseInt(x.radius) : i / 100 * parseInt(x.radius), 1 > S
                    && (S = 1), C = S / 2, C < x.radiusMin
                    && (C = x.radiusMin, S = 2 * C), F.setAttribute("width", i), F
                    .setAttribute("height", r), x.bgDraw
                    && (D.setAttribute("width", i), D.setAttribute("height", r)), n(C)
        }
        function n(t) {
            for (var e = 0, o = z.length; o > e; e++)
                r(z[e], t)
        }
        function r(t, e) {
            var o = t.vectorPosition.x - O.x, i = t.vectorPosition.y - O.y, n = t.vectorPosition.z
                    - O.z, r = Math.sqrt(o * o + i * i + n * n);
            t.vectorPosition.x /= r, t.vectorPosition.y /= r, t.vectorPosition.z /= r, t.vectorPosition.x *= e, t.vectorPosition.y *= e, t.vectorPosition.z *= e
        }
        function s(t, e, o, i, n) {
            var r = {};
            return "undefined" != typeof e.label
                    ? (r.element = document.createElementNS(N, "text"), r.element
                            .setAttribute("x", 0), r.element.setAttribute("y",
                            0), r.element.setAttribute("fill", e.fontColor==null?x.fontColor:e.fontColor), r.element
                            
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值