JS开发的扁平式标签云文字特效模板代码

程序源码2年前 (2023)发布 小编
0 0 0

JS开发的扁平式标签云文字特效模板代码是一款当鼠标悬停某个标签时,当前标签就会自动静止,移出后恢复滚动效果。本模板主要基于js、css和html开发的,整体简洁明了,效果很好。

效果

JS开发的扁平式标签云文字特效模板代码

核心代码

<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-->

<script type="text/javascript">
    /*3D标签云*/
    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>

适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。

资源下载

© 版权声明

相关文章

暂无评论

暂无评论...