3dtagcloud.min.js jquery 3d标签云插件

3dtagcloud.min.js jquery 3d标签云插件

3dtagcloud.min.js jquery 3d标签云插件

第一步引入bfwone 加载依赖项jquery

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["3dtagcloud.min"], function() {
                var entries = [{
                    label: 'Back to top', url: '#', target: '_top'
                },
                    {
                        label: 'Bootstrap', url: '#', target: '_top'
                    },
                    {
                        label: 'Carousel', url: '#', target: '_top'
                    },
                    {
                        label: 'Countdown', url: '#', target: '_top'
                    },
                    {
                        label: 'Dropdown Menu', url: '#', target: '_top'
                    },
                    {
                        label: 'CodePen', url: 'http://sc.chinaz.com/', target: '_top'
                    },
                    {
                        label: 'three.js', url: 'http://sc.chinaz.com/', target: '_top'
                    },
                    {
                        label: 'Form Validation', url: '#', target: '_top'
                    },
                    {
                        label: 'JS Compress', url: 'http://sc.chinaz.com/', target: '_top'
                    },
                    {
                        label: 'TinyPNG', url: 'http://sc.chinaz.com/', target: '_top'
                    },
                    {
                        label: 'Can I Use', url: 'http://sc.chinaz.com/', target: '_top'
                    },
                    {
                        label: 'URL shortener', url: 'http://sc.chinaz.com/', target: '_top'
                    },
                    {
                        label: 'Grid Layout', url: '#', target: '_top'
                    },
                    {
                        label: 'Twitter', url: 'http://sc.chinaz.com/', target: '_top'
                    },
                    {
                        label: 'deviantART', url: 'http://sc.chinaz.com/', target: '_top'
                    },
                    {
                        label: 'Gulp', url: 'http://sc.chinaz.com/', target: '_top'
                    },
                    {
                        label: 'Browsersync', url: 'http://sc.chinaz.com/', target: '_top'
                    },
                    {
                        label: 'GitHub', url: 'https://github.com/', target: '_top'
                    },
                    {
                        label: 'Shadertoy', url: 'http://sc.chinaz.com/', target: '_top'
                    },
                    {
                        label: 'Tree View', url: '#', target: '_top'
                    },
                    {
                        label: 'jsPerf', url: 'http://sc.chinaz.com/', target: '_top'
                    },
                    {
                        label: 'Foundation', url: 'http://sc.chinaz.com/', target: '_top'
                    },
                    {
                        label: 'CreateJS', url: 'http://sc.chinaz.com/', target: '_top'
                    },
                    {
                        label: 'Velocity.js', url: 'http://sc.chinaz.com/', target: '_top'
                    },
                    {
                        label: 'TweenLite', url: 'http://sc.chinaz.com/', target: '_top'
                    },
                    {
                        label: 'jQuery', url: 'http://sc.chinaz.com/', target: '_top'
                    },
                    {
                        label: 'Notification', url: '#', target: '_top'
                    },
                    {
                        label: 'Parallax', url: '#', target: '_top'
                    }];

                var settings = {

                    entries: entries,
                    width: 640,
                    height: 480,
                    radius: '65%',
                    radiusMin: 75,
                    bgDraw: true,
                    bgColor: '#494A5F',
                    opacityOver: 1.00,
                    opacityOut: 0.05,
                    opacitySpeed: 6,
                    fov: 800,
                    speed: 0.5,
                    fontFamily: 'Oswald, Arial, sans-serif',
                    fontSize: '15',
                    fontColor: '#fff',
                    fontWeight: 'normal', //bold
                    fontStyle: 'normal', //italic
                    fontStretch: 'normal', //wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
                    fontToUpperCase: true

                };

                //var svg3DTagCloud = new SVG3DTagCloud( document.getElementById( 'holder'  ), settings );
                $('#tag-cloud').svg3DTagCloud(settings);

            });
        });
    </script>
</head>
<body>
    <div class="zzsc-container">
        <div id='tag-cloud'></div>
    </div>

</body>
</html>


立即下载3dtagcloud.min.js查看所有js插件

网友评论0

程序员在线工具箱