tagcloud.js 3d标签云动画效果插件

tagcloud.js 3d标签云动画效果插件

tagcloud.js 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(["tagcloud", "tagcloud"], function() {
                tagcloud({
                    selector: ".tagcloud", //元素选择器
                    fontsize: 16, //基本字体大小, 单位px
                    radius: 100, //滚动半径, 单位px
                    mspeed: "normal", //滚动最大速度, 取值: slow, normal(默认), fast
                    ispeed: "normal", //滚动初速度, 取值: slow, normal(默认), fast
                    direction: 135, //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
                    keep: false          //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
                });
            });
        });
    </script>
</head>
<body>



    <div class="wrapper">
        <p>
            没有发现任何关注内容<br />此处为您显示检索历史
        </p>
        <div class="tagcloud fl">
            <a href="#">文献综述</a>
            <a href="#">对外投资</a>
            <a href="#">机器人</a>
            <a href="#">区块链</a>
            <a href="#">科技创新</a>
            <a href="#">计算机科学</a>
            <a href="#">自动驾驶</a>
            <a href="#">研究价值</a>
            <a href="#">模式识别</a>
            <a href="#">自然语言处理</a>
        </div>
        <div class="tagcloud fr">
            <a href="#">大数据时代</a>
            <a href="#">一带一路</a>
            <a href="#">智能控制</a>
            <a href="#">人工智能神经网络</a>
            <a href="#">计算机科学</a>
            <a href="#">自动驾驶</a>
        </div>
    </div>
    <!--wrapper-->



</body>
</html>


立即下载tagcloud.js查看所有js插件

网友评论0

程序员在线工具箱